Props - Svelte Heros v2 v3
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
- focusable = 'false',
- ariaLabel,
- ...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;
focusable?: 'true' | 'false' | 'auto';
}
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 #
Decorative Icons #
By default, icons have no aria-label
. This is intentional - when icons are used next
to text or as decorative elements, they don't need labels as screen readers will ignore them.
<button>
<AcademicCap /> AcademicCap
</button>
<!-- Screen reader reads: "AcademicCap button" -->
Standalone Icons #
When icons are used without accompanying text (e.g., icon-only buttons), you should provide an
accessible label using the ariaLabel
prop:
<button>
<AcademicCap ariaLabel="academic cap" />
</button>
<!-- Screen reader reads: "View App store button" -->
Rich Descriptions #
For complex icons that need detailed descriptions, use title
and desc
props.
The title
provides a short label, while desc
offers a longer description:
<AcademicCap
title={{ id: 'my-title', title: 'Red academic cap' }}
desc={{ id: 'my-descrip', desc: 'The shape of a red academic cap.' }}
color="red"
/>
Note: When using title
, you don't need ariaLabel
as the
title will be used automatically via aria-labelledby
.
Focusable #
Icons are not keyboard-focusable by default (focusable="false"
). If you need to
change this behavior, use the focusable
prop:
<AcademicCap focusable="true" />
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'}
/>