Props - Svelte Heros v2 v1

Prop #

- size: string = ctx.size || '24';
- role: string = ctx.role || 'img';
- color: string = ctx.color || 'currentColor';
- variation: 'solid' | 'outline' | 'mini' | 'micro' = ctx.variation || 'outline';
- strokeWidth: string = ctx.strokeWidth || '1.5';
- withEvents: boolean = ctx.withEvents || false;
- title: TitleType = {};
- desc: DescType = {};
- ariaLabel: string = 'academic cap';

Variation #

The default variation value is outline. Use the variation prop to change it to solid, mini or micro.

<AcademicCap variation="solid" /> 
<AcademicCap variation="mini" />
<AcademicCap variation="micro" />

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 text-blue-700 mr-4" />

CSS HEX Color #

Use the color attribute to change colors with HEX color code for Filled and Outlined components.

<AcademicCap color="#ff0000" /> 
<AcademicCap color="#00ffd8" />

Stroke width #

Use the strokeWidth prop to change the SVG stroke-width.

<AcademicCap strokeWidth="4" size="100" />

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="md" 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="md" />
</div>

Bootstrap #

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

A11y #

All icons have aria-label. For example AcademicCap has aria-label="academic cap". Use ariaLabel prop to modify the aria-label value.

<AcademicCap ariaLabel="red academic cap" class="text-red-500" />

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

<BellRegular
title={{ id: 'my-title', title: 'Red heart' }}
desc={{ id: 'my-descrip', desc: 'The shape of a red heart' }}
ariaLabel="red heart"
color="red"
/>

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" />

withEvents #

As default all icons are unfocusable. However you can add withEvents prop to make your icons focusable.

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

It is possible to add tabindex="0", but it is not recommended for A11y. If you want to use it add withEvents props.

<AcademicCap tabindex="0" withEvents />

Events #

All icons have the following events:

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

Passing down other attributes #

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

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

Dynamically change the variation #

<script>
  import { AcademicCap } from 'svelte-heros-v2';
  let isSolid = false;
</script>

<AcademicCap size="50" withEvents onclick={() => (isSolid = !isSolid)} variation={isSolid ? 'solid' : 'outline'} />