Icons
This package comes with Heroicons by default. You can simply add them by using the <x-icon> component.
1<x-icon name="hand-thumb-up" class="fs-xl" />Variants
Icons can have different variants. The default variant is solid. If you use SVG-Icons and you've setup the folder structure correctly, you can change the variant by adding --solid, --outline, --mini or --micro to the icon name.
If you use Font-Icons (e. G. FontAwesome), you can simply use the class names provided by the library: fa-solid fa-home.
1<x-icon name="hand-thumb-up--solid" class="fs-xl" />2<x-icon name="hand-thumb-up--outline" class="fs-xl" />3<x-icon name="hand-thumb-up--mini" class="fs-md" />4<x-icon name="hand-thumb-up--micro" class="fs" />Sizes
To change the size of an icon, simply use the helper classes .fs-xs, .fs-sm, .fs-base, .fs-md, .fs-lg, .fs-xl or .fs-xxl.
1<x-icon name="hand-thumb-up--micro" class="fs-xs" />2<x-icon name="hand-thumb-up--mini" class="fs-lg" />3<x-icon name="hand-thumb-up" class="fs-xxl" />Colors
Change the color of an icon by using the color classes.
1<x-icon name="hand-thumb-up--mini" class="fs-xl text-primary-400" />2<x-icon name="hand-thumb-up--mini" class="fs-xl text-red-400" />3<x-icon name="hand-thumb-up--mini" class="fs-xl text-success-400" />Class Parsing
In some cases (e. G. inside the button component icon-property) we don't want to create one property for the icon-name (icon="home") and one for the icon classes (icon-classes="text-red-400").
To solve this, the icon-property "name" will be added as a class to the icon, so you can style it directly via the icon's name-property.
1<x-icon name="hand-thumb-up--mini fs-xxl" />2<x-icon name="hand-thumb-up--mini text-red-400" />3<x-icon name="hand-thumb-up--mini opacity-25" />