Flag
nordaun-ui/flagFreeBlock
A simple flag display which renders a vector image of the selected country's flag by its country code.
Live preview
live · rendered by the registry
Rendered by @nordaun/ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://ui.nordaun.com/r/flag.jsonSource
1"use client";23import * as React from "react";45import { countryList } from "@/lib/geo";67export type FlagCode = (typeof countryList)[number];89const flagMap: Record<FlagCode, React.FC<React.SVGProps<SVGSVGElement>>> = {10 AC: (props) => (11 <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" {...props}>12 <path13 fill="#00247D"14 d="M32 5H4c-.205 0-.407.015-.604.045l-.004 1.754-2.73-.004C.244 7.427 0 8.185 0 9v18c0 2.209 1.791 4 4 4h28c2.209 0 4-1.791 4-4V9c0-2.209-1.791-4-4-4z"15 />16 <path17 fill="#288548"18 d="M29.159 16.209l-1.53 3.927-1.53-3.927 1.53-3.927z"19 />20 <path21 fill="#FFF"22 d="M24.353 17.574s.273.591.91.591 1.001-.455 1.001-.455l.637.819s-.409.273-.409.592c0 0-.273-.273-.182-.501 0 0-.183.183-.318.228 0 0-.046-.273.045-.409 0 0-.318.182-.728.182s-.819-.272-.91-.5c-.091-.228-.046-.547-.046-.547zm2.547-.592c0 .15-.121.272-.273.272H26.4c-.15 0-.273-.122-.273-.272 0-.15.123-.273.273-.273h.227c.152 0 .273.123.273.273zm1.412-.364c0 .151-.122.273-.273.273h-.229c-.15 0-.272-.122-.272-.273 0-.15.122-.273.272-.273h.228c.152.001.274.123.274.273z"23 />24 <path25 fill="#6488BD"26 d="M27.076 17.188c-.127.08-.296.043-.377-.085l-.097-.153c-.081-.128-.043-.296.084-.377l.039-.024c.127-.081.296-.043.376.085l.098.153c.081.127.043.296-.084.377l-.039.024zm1.547-.182c-.127.081-.296.043-.376-.084l-.098-.154c-.081-.127-.043-.296.084-.376l.039-.024c.127-.081.296-.043.377.084l.097.154c.081.127.043.296-.084.376l-.039.024z"27 />28 <path29 fill="#297F47"30 d="M27.622 17.098c-.127.08-.296.043-.376-.085l-.098-.153c-.081-.128-.043-.297.084-.377l.039-.024c.127-.081.296-.043.377.085l.097.153c.081.127.043.296-.084.377l-.039.024zm1.337.133c-.15-.005-.269-.131-.264-.282l.006-.182c.005-.15.132-.269.282-.264l.045.002c.151.005.27.131.264.281l-.006.183c-.005.15-.131.269-.281.264l-.046-.002z"31 />32 <path33 fill="#689F9E"34 d="M27.629 16.709c.591-.027 1.456 1.684 1.502 1.911.045.228-.273.864-.501 1.001-.228.137-1.274.273-1.547.046-.273-.227-.318-.819-.364-1.001-.045-.183-.501-.819-.501-.819l-.5-.091.182-.182.592.045.046-.182h-.273c-.001.001.409-.682 1.364-.728z"35 />36 <path37 fill="#481918"38 d="M27.447 19.53c.228-.274 1.046-.955 1.319-.818.273.136.228.409-.046.682-.272.273-1.273.136-1.273.136z"39 />40 <path41 fill="#FFF"42// … truncated
Files it writes
More from @nordaun/ui
All 8 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Audioaudio | @nordaun/ui | Blocks | Free | 1 dep | |
| Filefile | @nordaun/ui | Blocks | Free | 1 dep · 3 files | |
| Loadingloading | @nordaun/ui | Blocks | Free | no deps | |
| Mapmap | @nordaun/ui | Blocks | Free | 2 deps · 2 files | |
| Passwordpassword | @nordaun/ui | Blocks | Free | 1 dep | |
| Phonephone | @nordaun/ui | Blocks | Free | 2 deps · 3 files | |
| Videovideo | @nordaun/ui | Blocks | Free | 1 dep · 2 files |
