Svelte Flags

Svelte-Flags

250+ Country-flags Svelte components.

Installation

npm i -D svelte-flags

Size

Use the size prop to change the flag sizes.

• REPL 1
• REPL 2

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

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