Props - Svelte Radix v2

Props #

Types #

All icons are extended SVGAttributes from svelte/elements.

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:

Colors #

Use the color props to change colors with HEX color code or HTML color names:

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.

A green accessibilityThe shape of a green accessibility icon

Passing down other attributes #

You can pass other SVGAttributes.