Props - Svelte Heros v2 v2

Props #

All icons are extended SVGAttributes from svelte/elements.

- size = ctx.size
- role = ctx.role || 'img'
- color = ctx.color || 'currentColor'
- variation = ctx.variation || "outline"
- strokeWidth = ctx.strokeWidth || '1.5'
- title
- desc
- ariaLabel = "<icon file name>"
- ...restProps

Types #

import type { SVGAttributes } from 'svelte/elements';
type TitleType = {
id?: string;
title?: string;
};

type DescType = {
id?: string;
desc?: string;
};

interface BaseProps extends SVGAttributes<SVGElement>{
size?: string;
role?: string;
color?: string;
variation?: "solid" | "outline" | "mini" | "micro";
strokeWidth?: string;
}

export interface CtxType extends BaseProps {}

export interface Props extends BaseProps{
title?: TitleType;
desc?: DescType;
ariaLabel?: string;
}

Size #

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

<AcademicCap size="40" />

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 Colors #

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

<AcademicCap color="#ff0000" />

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.

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

A11y #

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

<AcademicCap ariaLabel="academic cap" />

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

<AcademicCap
title={{ id: 'my-title', title: 'Red academi cap' }}
desc={{ id: 'my-descrip', desc: 'The shape of a red academic cap.' }}
ariaLabel="red academic cap"
color="red"
/>

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.

<AcademicCap
id="my-svg"
transform="rotate(45)"
class="hover:cursor-pointer dark:text-white"
onclick={() => alert('hello')}
/>

Dynamically changing variation #

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

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

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

<AcademicCap
size="30"
color="#ff0033"
onclick={() => (isSolid = !isSolid)}
variation={isSolid ? 'solid' : 'outline'}
/>