Props - Svelte Flags v1

Prop #

- size: string = ctx.size || '24';
- role: string = ctx.role || 'img';
- ariaLabel: string = '<icon file name>';

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 attributes directly to the icon component 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 Us has aria-label="us". Use ariaLabel prop to modify the aria-label value.

<Us ariaLabel="The USA flag" />

Events #

All icons have the following events:

- on:click
- on:keydown
- on:keyup
- on:focus
- on:blur
- on:mouseenter
- on:mouseleave
- on:mouseover
- on:mouseout

<Us on:click="{handleClick}" />

Passing down other attributes #

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

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