Svelte Flags

250+ Country-flags Svelte components.

Thank you for considering my open-source package. If you use it in a commercial project, please support me by sponsoring me on GitHub: https://github.com/sponsors/shinokada. Your support helps me maintain and improve this package for the benefit of the community.

Installation

pnpm i -D svelte-flags

Usage

<script>
  import { Us } from 'svelte-flags';
</script>

<Us />

Faster compiling

If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation.

<script>
  import Us from 'svelte-flags/Us.svelte';
</script>

<Us />

If you are a TypeScript user, install typescript version 5.0.0 or above.

As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

{
  //...
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

REPL

• REPL 1
• REPL 2

Props

• size = '24';
• role = 'img';

IDE support

If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, props, and events.

Size

Use the size prop to change the flag sizes.

<script>
  import { Us, Ca, Fr, De, Dk, Jp, No, Ch, Cz } from 'svelte-flags';
</script>

<div>
  <Us size="200" />
  <Ca size="200" />
  <Fr size="200" />
  <De size="200" />
  <Dk size="200" />
  <Jp size="200" />
  <No size="200" />
  <Ch size="200" />
  <Cz size="200" />
</div>

CSS frameworks support

REPL

You can change size and other CSS using the class prop.

Tailwind CSS example:

<Us class="rounded-full bg-white h-40 w-40 ring-2 rring-gray-300 m-4" />

Or you can use size and class props together.

Tailwind CSS
<Us class="rounded-full bg-white h-40 w-40 ring-2 ring-gray-300 m-4" />
Tailwind CSS + Size
<Ca class="rounded-full bg-white ring-2 ring-gray-300 m-4" size="150" />
Tailwind CSS + size null
<Fr class="rounded-full bg-white w-40 ring-2 ring-gray-300 m-4" size="150" />

Bootstrap example:

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

Unfocusable icon

If you want to make an icon unfocusable, add tabindex="-1".

<Us tabindex="-1" />

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

Passing down other attributes

You can pass other attibutes as well.

<Us tabindex="0" />

Using svelte:component

<svelte:component this="{Us}" />

Using onMount

<script>
  import { Us } from 'svelte-flags';
  import { onMount } from 'svelte';
  const props = {
    size: '50',
    color: '#ff0000'
  };
  onMount(() => {
    const icon = new Us({ target: document.body, props });
  });
</script>

Import all

Use import * as Icon from 'svelte-circle-flags.

<script>
  import * as Icon from 'svelte-flags';
</script>
<h1>Size</h1>
<Icon.Fr size="30" />
<Icon.De size="40" />

<h1>CSS HEX color</h1>
<Icon.Dk color="#c61515" size="40" />

<h1>Tailwind CSS</h1>
<Icon.Jp class="text-blue-500" />
<Icon.No class="text-pink-700" />

Icon Names

Icon list

ISO 3166 Country Codes

ISO 3166 Country Codes

Credit

All the credits goes to country-flags

Other icons

• Svelte-Icon-Sets

Experience lightning-fast browsing and offline access with Our PWA

This website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".