Props - Svelte Flags v3

Props #

- size = ctx.size || '24'
- role = ctx.role || 'img'
- title
- desc
- focusable = 'false'
- ariaLabel,
- ...restProps

Types #

All icons are extended SVGAttributes from svelte/elements.

import type { SVGAttributes } from 'svelte/elements';

export type TitleType = {
  id?: string;
  title?: string;
};

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

export interface BaseProps extends SVGAttributes<SVGElement> {
  size?: string;
  role?: string;
}

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:

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

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>
  <Ca />Canada
</button>
<!-- Screen reader reads: "Canada 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>
  <Ca ariaLabel="View Canada" />
</button>
<!-- Screen reader reads: "View Canada 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:

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

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:

<Ca focusable="true" />

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')}
/>