Props - Svelte Flags v2

Props #

- size = ctx.size || '24' 
- role = ctx.role || 'img' 
- title = {} 
- desc = {} 
- ariaLabel =  <icon file name>  
- ...restProps (class, id, name, role, and all other props from SVGAttributes )

Types #

All icons are extended SVGAttributes from svelte/elements.

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;
}
interface CtxType extends BaseProps {}

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:

<Us size="40" />

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 #

<Us class="rotate-45" />

Bootstrap #

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

A11y #

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

<Ca ariaLabel="The Canadian flag" />

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

<Ca
  title={{ id: 'my-title', title: 'The Canadian flag' }}
  desc={{ id: 'my-descrip', desc: 'The Canadian flag with the size of 24 px' }}
  ariaLabel="The Canadian flag"
  size="50"
/>

Passing down other attributes #

Since all icons have ...restProps, you can pass other SVGAttributes.

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