Props - Svelte Bootstrap SVG Icons v2
Props #
- size = ctx.size || '24'
- role = ctx.role || 'img'
- color = ctx.color || 'currentColor'
- title
- desc
- class
- ariaLabel = <file name>
- ...restProps
Types #
import type { SVGAttributes } from 'svelte/elements';
type TitleType = {
id?: string;
title?: string;
};
type DescType = {
id?: string;
desc?: string;
};
export interface BaseProps extends SVGAttributes<SVGElement>{
size?: string;
role?: string;
color?: string;
}
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:
<Activity size="40" />
You can add a custom size using Tailwind CSS by including the desired classes in the class
prop. For example:
<Activity class="h-24 w-24" />
Colors #
Use the color props to change colors with HEX color code or HTML color names:
<Activity color="#ff0000" />
<Activity color="green" />
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 #
<Activity 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">
<Activity size="30" />
</div>
Bootstrap #
<Activity 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.
<Activity 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.
<Activity ariaLabel="address card outline" />
Use title
, desc
, and ariaLabel
props to make your icons accessible.
<Activity
title={{ id: 'my-title', title: 'A green Activity' }}
desc={{ id: 'my-descrip', desc: 'The shape of a green Activity icon' }}
ariaLabel="green Activity"
color="green"
/>
Passing down other attributes #
Since all icons have ...restProps
, you can pass other attibutes as well.
<Activity id="my-svg" transform="rotate(45)" />