Icon
The component is used to display icons that can be placed in other components.
Preparing the icon
The icon file should be prepared in such a way that it does not contain any icon formatting elements, e.g. defining color or size. It should only contain the contents of the svg tag. Below is an example of a IconCheck:
1// Sample icon file
2
3 package gopress
4
5 templ IconCheck() {
6 <path d="M28.281 6.281 11 23.563 3.719 16.28 2.28 17.72l8 8 .719.687.719-.687 18-18Z"></path>
7 }The above content is placed in the svg tag, the formatting of which is handled by the Icon component.
IconBosons
Color
Color from the Tailwind palette.
type:
stringdefault:
primaryvalues:
primary, secondary, warning, info, success, danger, currentSize
Icon size.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xl, fullViewBox
Size of viewbox for svg.
type:
stringdefault:
0 0 32 32NoClass
Disable default size and color from struct. It can be helpful for adding custom classes.
type:
booldefault:
falseAttrs
Sets attributes in the html tag.
type:
gopress.AttrsExamples
Default button with sizes
xs
sm
md
lg
xl
full
In above example icon with full is in container with 100px width & height.
1// Sample icon with size
2
3@protons.Icon(&protons.IconBosons{
4 Size: "md",
5}) {
6 @icons.IconCheck()
7}Default button with sizes
current
primary
secondary
warning
danger
success
info
1// Sample icon with color
2
3@protons.Icon(&protons.IconBosons{
4 Color: "primary",
5}) {
6 @icons.IconCheck()
7}