Props - Svelte Heros v2 v2

Props #

All icons are extended SVGAttributes from svelte/elements.

Types #

Size #

To change the size of an icon, use the size prop and specify the desired size. For example:

You can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

CSS HEX Colors #

Use the color attribute to change colors with HEX color code:

CSS framework #

You can apply CSS framework color and other attributes directly to the icon component or its parent tag using the class prop.

Tailwind CSS #

Bootstrap #

Dark mode #

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

A11y #

All icons have aria-label. For example AddressBookSolid has aria-label="addressbook solid". Use ariaLabel prop to modify the aria-label value.

Use title, desc, and ariaLabel props to make your icons accessible.

Red academi capThe shape of a red academic cap.

Passing down other attributes #

Since all icons have ...restProps, you can pass other SVGAttributes.

Since all icons have ...restProps, you can pass other attibutes as well.

Dynamically changing variation #

Use the following example to change the variation of icon dynamically.

By clicking the icon, it changes to solid or outline.