svelte-flag-icons

Svelte-Flag-Icons

260+ Flag-icons for Svelte.

Installation

npm i -D svelte-flag-icons

If you are a TypeScript user, Add "moduleResolution": "bundler" to tsconfig.json:

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

REPL

Demo 1

Icon Names

Icon list

ISO 3166 Country Codes

ISO 3166 Country Codes

Usage

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

<Us />

Faster compiling

This require "typescript": "^5.0.0".
For faster compilation, you can import the icon directly.

<script>
  import No from 'svelte-flag-icons/No.svelte'
  import Us from 'svelte-flag-icons/Us.svelte'
</script>

  <No />
  <Us />

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

pnpm i -D typescript@beta

To avoid any complaints from the editor, add the following code to your tsconfig.json file.

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

Size

Use the size prop to change the flag sizes.

<script>
  import { Us, Ca, Fr, De } from 'svelte-flag-icons';
</script>

<div>
  <Us size="200" />
  <Ca size="200" />
  <Fr size="200" />
  <De size="200" />
</div>

CSS frameworks support

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 ring-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" />

Bootstrap example:

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

aria-label

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

<Us ariaLabel="United States of America" />

Passing down other attributes

You can pass other attibutes as well.

<Us tabindex="0" />

Unfocusable icon

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

<Us tabindex="-1" />

Using svelte:component

<script>
  import { Ca } from 'svelte-flag-icons';
</script>

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

Rendering Dynamically

REPL

<script>
    import * as Flag from "svelte-flag-icons";
  const users =[
    {
      name: 'John',
      country: 'Ca'
    },
    {
      name: 'Jane',
      country: 'Us'
    }
  ]
  const user ={
    country:'Fr'
  }
</script>

<svelte:component this={Flag[user.country]} size="20" />

{#each users as user}
  <svelte:component this={Flag[user.country]} size="20" />
{/each}

Using onMount

<script>
  import { ChatPlus } from 'svelte-flag-icons';
  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-flag-icons.
REPL

<script>
  import * as Icon from 'svelte-flag-icons';
</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" />

Credit

All the credits goes to flag-icons

Other icons

• Svelte-Icon-Sets

PWA: Fast & Offline

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".