Props - Svelte Supertiny v2

Props #

- size = ctx.size || '24' 
- role = ctx.role || 'img'
- title
- desc
- ariaLabel
- class: classname
- ariaLabel =  file-name
- ...restProps

Types #

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

type DescType = {
  id?: string | undefined | null;
  desc?: string | undefined | null;
};

export interface BaseProps extends SVGAttributes<SVGElement>{
  size?: string | undefined | null;
  role?: string | undefined | null;
  color?: string | undefined | null;
  class?: string | undefined | null;
}

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

Size #

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

<Svelte size="40" />

You can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

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

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 #

<Svelte size="30" class="m-2 inline" />

<div class="m-2 inline">
  <Svelte size="30" />
</div>

Bootstrap #

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

A11y #

All icons have aria-label. For example Svelte has aria-label="svelte". Use ariaLabel prop to modify the aria-label value.

<Svelte ariaLabel="Orange Svelte logo" />

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

<Svelte
  title={{ id: 'my-title', title: 'A oragne Svelte logo' }}
  desc={{ id: 'my-descrip', desc: 'The shape of S for Svelte icon' }}
  ariaLabel="Svelte logo"
/>

Passing down other attributes #

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

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