IconHero
It is a component closing the icon from the circle and or a square used to visually highlight the message in interface elements such as Modal.
IconHeroBosons
Color
Color from the Tailwind palette.
type:
stringdefault:
primaryvalues:
primary, secondary, warning, info, success, dangerSize
IconHero size.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xlOutline
Is outline?
type:
booldefault:
falseTransparent
Is transparent?
type:
booldefault:
falseNoborder
It has no border?
type:
booldefault:
falseSquare
Shape of icon area.
type:
booldefault:
falseViewBox
Size of viewbox for svg.
type:
stringdefault:
0 0 32 32Attrs
Sets attributes in the html tag.
type:
gopress.AttrsExamples
Sizes
xs
sm
md
lg
xl
1// IconHero with md size
2
3@protons.IconHero(
4 &protons.IconHeroBosons{
5 Size: "md",
6 },
7) {
8 @icons.IconCheck()
9}Colors
primary
secondary
warning
danger
success
info
1// IconHero with primary color
2
3@protons.IconHero(
4 &protons.IconHeroBosons{
5 Color: "primary",
6 },
7) {
8 @icons.IconCheck()
9}Sizes with outline variant
xs
sm
md
lg
xl
1// IconHero with md size and outline variant
2
3@protons.IconHero(
4 &protons.IconHeroBosons{
5 Outline: true,
6 Size: "md",
7 },
8) {
9 @icons.IconCheck()
10}Colors with outline variant
primary
secondary
warning
danger
success
info
1// IconHero with primary color and outline variant
2
3@protons.IconHero(
4 &protons.IconHeroBosons{
5 Outline: true,
6 Color: "primary",
7 },
8) {
9 @icons.IconCheck()
10}Shape and transparency
square
transparent
1// IconHero with square and transparency variant
2
3@protons.IconHero(
4 &protons.IconHeroBosons{
5 Color: "primary",
6 Square: true,
7 Transparent: true,
8 Outline: true,
9 },
10) {
11 @icons.IconCheck()
12}