Props - Svelte Flag Icons v1

Prop #

- size: string = ctx.size || '24';
- role: string = ctx.role || 'img';
- color: string = ctx.color || 'currentColor';
- 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" />

If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

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

<Us size="30" class="inline m-4" />

<div class="inline m-4">
  <Us size="30" />
</div>

Bootstrap #

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

aria-label #

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

<Us ariaLabel="American flag" />

Events #

Use withEvents prop to use 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)" />