Props - Svelte Heros v6

Prop #

- size: string = ctx.size || '24';
- role: string = ctx.role || 'img';
- color: string = ctx.color || 'currentColor';
- ariaLabel: string = '<icon file name>';

Size #

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

<AcademicCap size="40" />

If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

<AcademicCap class="h-24 w-24" />

Color #

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

<AcademicCap color="#ff0000" />
<AcademicCap color="yellow" />

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 #

<AcademicCap size="30" class="text-red-700 dark:text-green-300 inline m-1" />

<div class="text-red-700 dark:text-green-300 inline m-1">
  <AcademicCap size="30" />
</div>

Bootstrap #

<AcademicCap class="position-absolute top-0 px-1" />

Dark mode #

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

Let's use dark for the dark mode class as an example.

<AcademicCap class="text-blue-700 dark:text-red-500" />

aria-label #

All icons have aria-label. For example AcademicCap has aria-label="admin line user faces". Use ariaLabel prop to modify the aria-label value.

<AcademicCap ariaLabel="blue admin user icon with face" color="blue" />

Events #

Use withEvents prop to use the following events:

- on:click
- on:keydown
- on:keyup
- on:focus
- on:blur
- on:mouseenter
- on:mouseleave
- on:mouseover
- on:mouseout

<AcademicCap on:click="{handleClick}" />

Passing down other attributes #

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

<AcademicCap id="my-svg" transform="rotate(45)" />