Props - Svelte Flag Icons v2

Props #

All icons are extended SVGAttributes from svelte/elements.

- size = ctx.size || '24' 
- role = ctx.role || 'img'
- color = ctx.color || 'currentColor' 
- title
- desc
- ariaLabel =  "accessibility"
- ...restProps (class, id, name, role, and all other props from SVGAttributes)

Size #

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

<Jp size="40" />

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

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

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

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

Bootstrap #

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

A11y #

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

<Jp ariaLabel="Japanese flag" />

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

<Jp
  title={{ id: 'my-title', title: 'Japanese flag icon' }}
  desc={{ id: 'my-descrip', desc: 'Red sun on white field, simple design for easy recognition.' }}
  ariaLabel="Japanese flag"
/>
Japanese flag iconRed sun on white field, simple design for easy recognition.

Passing down other attributes #

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

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