@ds-mo/icons 0.3.0 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # @ds-mo/icons
 
-IcoMo — 377 SVG icons as tree-shakeable React components, TypeScript definitions, and SVG sprite.
+IcoMo — **422 SVG icons** (390 system icons + 32 country flags) as tree-shakeable React components, framework-agnostic SVG strings, TypeScript definitions, and an SVG sprite.
 
 Part of the **ds-mo design system trilogy**: [@ds-mo/tokens](https://www.npmjs.com/package/@ds-mo/tokens) → **@ds-mo/icons** → [@ds-mo/ui](https://www.npmjs.com/package/@ds-mo/ui) (CompoMo).
 
@@ -14,106 +14,166 @@ npm install @ds-mo/icons
 pnpm add @ds-mo/icons
 ```
 
-React is a peer dependency — make sure it's installed in your project.
+React is a peer dependency for the React entry points — vanilla SVG / sprite consumers don't need it.
 
 ## Icon browser
 
-Browse and search all icons at the [GitHub Pages icon browser](https://zainadeel.github.io/icomo/). Includes a live search, size slider, and click-to-copy import statements.
+Browse and search all icons at the [GitHub Pages icon browser](https://zainadeel.github.io/icomo/). Live search (includes aliases), size toggle, light/dark theme, category tabs, click-to-copy imports.
+
+## Categories
+
+Icons are grouped into **categories** so the pipeline can treat them differently:
+
+| Category | Count | Themeable | Description |
+|---|---|---|---|
+| `system` | 390 | ✅ `currentColor` | Monochrome UI icons — respond to CSS `color` and the `color` prop |
+| `flag` | 32 | ❌ preserved | Multi-color country flags — hex + P3 wide-gamut colors kept verbatim |
+
+Flag component names are prefixed with `Flag` (e.g. `FlagFrance`, `FlagUnitedStates`) so every export is globally unique.
 
 ## Usage
 
 ### React components
 
 ```tsx
-import { ArrowRight, CheckCircle, Gear } from '@ds-mo/icons';
+import { ArrowRight, CheckCircle, FlagFrance, FlagUnitedStates } from '@ds-mo/icons';
 
-// Default: 20px, currentColor
-<ArrowRight />
-
-// Custom size
+// System icon — themeable
+<ArrowRight />                                    // 20px, currentColor
 <ArrowRight size={24} />
-
-// Custom size and color
 <ArrowRight size={24} color="red" />
-
-// With CSS variables
 <ArrowRight size="var(--dimension-size-400)" color="var(--color-icon-primary)" />
 
-// With a ref
-import { useRef } from 'react';
-const ref = useRef<SVGSVGElement>(null);
-<ArrowRight ref={ref} />
+// Flag icon — colors preserved, no `color` prop
+<FlagFrance />
+<FlagUnitedStates size={32} />
 ```
 
-All standard SVG attributes are forwarded, plus:
+All standard SVG attributes are forwarded. Category-specific props:
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `size` | `number \| string` | `20` | Width and height |
-| `color` | `string` | `'currentColor'` | Fill color |
-| `className` | `string` | — | CSS class |
+| Prop | System | Flag | Default | Description |
+|---|---|---|---|---|
+| `size` | ✅ | ✅ | `20` | Width and height |
+| `color` | ✅ | — | `'currentColor'` | Fill color (system only) |
+| `className` | ✅ | ✅ | — | CSS class |
 
-### Direct imports
+### Direct / subpath imports
 
-For guaranteed tree-shaking in environments where barrel imports aren't optimised:
+For guaranteed tree-shaking or category-only bundles:
 
 ```tsx
+// Single system icon
 import { ArrowRight } from '@ds-mo/icons/icons/ArrowRight';
+
+// Single flag
+import { FlagFrance } from '@ds-mo/icons/flags/FlagFrance';
+
+// Flag-only barrel
+import { FlagFrance, FlagGermany } from '@ds-mo/icons/flags';
+```
+
+### Framework-agnostic SVG strings
+
+For Angular, Vue, Svelte, web components, Liquid, vanilla JS — any consumer that wants raw SVG markup without React:
+
+```ts
+import { ArrowRight } from '@ds-mo/icons/svg';            // system
+import { FlagFrance } from '@ds-mo/icons/svg';            // flag (prefixed)
+import { FlagFrance } from '@ds-mo/icons/svg/flags';      // flag-only
+
+// ArrowRight === '<svg ...>...</svg>' with fill="currentColor"
+// FlagFrance === '<svg ...>...</svg>' with hex fills + P3 color(display-p3 ...)
+element.innerHTML = ArrowRight;
 ```
 
-### SVG sprite (non-React)
+### SVG sprite
 
-Include the sprite in your HTML, then reference icons by kebab-case name:
+Drop the sprite into your HTML and reference by kebab-case name:
 
 ```html
 <svg width="20" height="20"><use href="/sprite.svg#arrow-right"/></svg>
-<svg width="20" height="20"><use href="/sprite.svg#check-circle"/></svg>
-<svg width="20" height="20"><use href="/sprite.svg#gear"/></svg>
+<svg width="20" height="20"><use href="/sprite.svg#flag-france"/></svg>
+<svg width="20" height="20"><use href="/sprite.svg#flag-united-states"/></svg>
+```
+
+Sprite path: `node_modules/@ds-mo/icons/dist/sprite.svg` (or via the `./sprite` subpath export).
+
+### Metadata manifest
+
+Machine-readable icon list (for docs, agents, search indexes):
+
+```ts
+import meta from '@ds-mo/icons/meta';
+
+meta.version      // "0.5.0"
+meta.count        // 422
+meta.categories   // { system: {count:390,themeable:true}, flag: {count:32,themeable:false} }
+meta.icons        // [{ name, category, kebab, aliases }, ...]
 ```
 
 ## CompoMo integration
 
-IcoMo icons are designed to work with [CompoMo (@ds-mo/ui)](https://www.npmjs.com/package/@ds-mo/ui) components via the `icon` prop pattern. CompoMo components accept any React component that matches:
+IcoMo icons work with [CompoMo (@ds-mo/ui)](https://www.npmjs.com/package/@ds-mo/ui) components via the `icon` prop pattern:
 
 ```ts
 icon?: React.ComponentType<{ size?: number | string }>
 ```
 
-All IcoMo icons satisfy this interface, so you can pass them directly:
+Both system and flag components satisfy this interface:
 
 ```tsx
 import { Button } from '@ds-mo/ui';
-import { ArrowRight, CheckCircle } from '@ds-mo/icons';
+import { ArrowRight, CheckCircle, FlagFrance } from '@ds-mo/icons';
 
 <Button icon={ArrowRight}>Continue</Button>
 <Button icon={CheckCircle} variant="success">Done</Button>
+<Button icon={FlagFrance}>Français</Button>
 ```
 
-## Icon names
+## Why flags keep their own colors
+
+Flag SVGs ship with two color sources per element:
 
-All icons are PascalCase in React, kebab-case in the sprite:
+- `fill="#BE2A2C"` — standard hex, rendered on every browser
+- `style="fill:color(display-p3 0.7451 0.1647 0.1725)"` — wide-gamut P3 for modern displays
+
+The build preserves **both**: modern browsers use the P3 style; older browsers fall back to the hex attribute via SVG's native attribute-vs-style cascade. No pipeline transform touches `fill="black"` or strips `style=` for the flag category.
+
+## Naming
 
 | React | Sprite |
 |---|---|
 | `ArrowRight` | `arrow-right` |
 | `CheckCircle` | `check-circle` |
 | `EntityVehicleFilled` | `entity-vehicle-filled` |
+| `FlagFrance` | `flag-france` |
+| `FlagUnitedStates` | `flag-united-states` |
 
 ## Adding or updating icons
 
-1. Export SVGs from Figma as 16×16, fill-based, with `fill="black"`
-2. Drop into `src/icons/` — filenames must be PascalCase (e.g. `MyNewIcon.svg`)
-3. Run the build:
+### System icons
 
-```bash
-node scripts/build.mjs
-```
+1. Export SVG from Figma as 16×16, fill-based, with `fill="black"` (or no fill)
+2. Drop into `src/icons/` — filename must be PascalCase (e.g. `MyNewIcon.svg`)
+3. Optional: add `src/icons/MyNewIcon.json` with `{ "aliases": ["alt-name"] }`
+4. Run the build
+
+### Flag icons
+
+1. Export SVG from Figma as 16×16 with all fill colors baked in
+2. Drop into `src/flags/` — filename is the country name in PascalCase (e.g. `NewZealand.svg` → exports as `FlagNewZealand`)
+3. Run the build
+
+### Adding a new category
+
+Add a config entry to `scripts/utils/categories.mjs` with its own `dir`, `prefix`, and `normalize` rules. Drop SVGs into `src/<dir>/`.
 
 ## Dev
 
 ```bash
-node scripts/build.mjs          # full build
-node scripts/build.mjs --watch  # watch mode (rebuilds on SVG changes)
+npm run build         # full build (React + sprite + SVG strings + meta)
+npm run build:docs    # regenerate docs/index.html
+npm run dev           # watch mode
 ```
 
 ## License

package/dist/createFlagIcon.d.ts

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent, RefAttributes, SVGAttributes } from 'react';
+
+export interface FlagIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'color'> {
+  /** Icon size in pixels. Defaults to 20. */
+  size?: number | string;
+  /** Additional CSS class name. */
+  className?: string;
+}
+
+export type FlagIconComponent = ForwardRefExoticComponent<FlagIconProps & RefAttributes<SVGSVGElement>>;
+
+export declare function createFlagIcon(name: string, children: React.ReactNode[]): FlagIconComponent;

package/dist/createFlagIcon.mjs

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+const createFlagIcon = (name, children) =>
+  forwardRef(({ size = 20, className, ...rest }, ref) =>
+    createElement('svg', {
+      ref,
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: size,
+      height: size,
+      viewBox: '0 0 16 16',
+      fill: 'none',
+      className,
+      'data-icon': name,
+      'data-category': 'flag',
+      ...rest,
+    }, ...children)
+  );
+
+export { createFlagIcon };

package/dist/createIcon.d.ts

@@ -1,7 +1,7 @@
 import { ForwardRefExoticComponent, RefAttributes, SVGAttributes } from 'react';
 
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
-  /** Icon size in pixels. Defaults to 16. */
+  /** Icon size in pixels. Defaults to 20. */
   size?: number | string;
   /** Icon color. Defaults to 'currentColor'. */
   color?: string;

package/dist/flags/FlagAustria.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagAustria: FlagIconComponent;

package/dist/flags/FlagAustria.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagAustria = createFlagIcon('flag-austria', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M14 12.5H2V9.5H14V12.5Z', fill: '#B92932', style: { fill: 'color(display-p3 0.7255 0.1608 0.1961)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M14 6.5H2V3.5H14V6.5Z', fill: '#B92932', style: { fill: 'color(display-p3 0.7255 0.1608 0.1961)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagAustria.displayName = 'FlagAustria';
+export { FlagAustria };

package/dist/flags/FlagBelgium.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagBelgium: FlagIconComponent;

package/dist/flags/FlagBelgium.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagBelgium = createFlagIcon('flag-belgium', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F8DC51', style: { fill: 'color(display-p3 0.9725 0.8627 0.3176)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 3.5, width: 3.99975, height: 9, fill: 'black', style: { fill: 'black', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 10.0024, y: 3.5, width: 3.9975, height: 9, fill: '#DD4446', style: { fill: 'color(display-p3 0.8667 0.2667 0.2745)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagBelgium.displayName = 'FlagBelgium';
+export { FlagBelgium };

package/dist/flags/FlagBulgaria.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagBulgaria: FlagIconComponent;

package/dist/flags/FlagBulgaria.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagBulgaria = createFlagIcon('flag-bulgaria', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 6.5, width: 12, height: 3, fill: '#439571', style: { fill: 'color(display-p3 0.2627 0.5843 0.4431)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 2, y: 9.5, width: 12, height: 3, fill: '#C63621', style: { fill: 'color(display-p3 0.7765 0.2118 0.1294)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagBulgaria.displayName = 'FlagBulgaria';
+export { FlagBulgaria };

package/dist/flags/FlagCanada.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagCanada: FlagIconComponent;

package/dist/flags/FlagCanada.mjs

@@ -0,0 +1,12 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagCanada = createFlagIcon('flag-canada', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M5 12.5L5 3.5H2V12.5H5Z', fill: '#C53A28', style: { fill: 'color(display-p3 0.7725 0.2275 0.1569)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M14 12.5L14 3.5H11V12.5H14Z', fill: '#C53A28', style: { fill: 'color(display-p3 0.7725 0.2275 0.1569)', fillOpacity: 1 }, key: 'c' }),
+  createElement('path', { d: 'M8.06097 9.66391L8.12243 10.84H7.87661L7.93807 9.66391C7.93851 9.65456 7.93807 9.64521 7.93629 9.63586C7.92426 9.5655 7.85702 9.5183 7.78666 9.53032L6.61593 9.73605L6.77402 9.30009C6.78738 9.26491 6.77625 9.22483 6.74686 9.20079L5.46436 8.16232L5.75336 8.02739C5.79389 8.00824 5.81348 7.96193 5.79968 7.91962L5.54629 7.13988L6.28507 7.29663C6.32604 7.30554 6.36789 7.28372 6.38437 7.24498L6.52732 6.90832L7.104 7.52686C7.12493 7.54868 7.15521 7.55848 7.18504 7.55269C7.23314 7.54333 7.26475 7.49702 7.2554 7.44893L6.97753 6.01502L7.42329 6.27241L7.42863 6.27508C7.47227 6.29691 7.52571 6.27909 7.54753 6.23545L7.99996 5.34705L8.4524 6.23545L8.45507 6.2408C8.47957 6.2831 8.53389 6.29735 8.5762 6.27241L9.02196 6.01502L8.74408 7.44893C8.73829 7.47876 8.74809 7.50905 8.76991 7.52998C8.80554 7.56382 8.8612 7.56248 8.89504 7.52686L9.47172 6.90832L9.61467 7.24498C9.63114 7.28372 9.67256 7.30509 9.71397 7.29663L10.4527 7.13988L10.1994 7.91962C10.1856 7.96237 10.2052 8.00824 10.2457 8.02739L10.5347 8.16232L9.25218 9.20079C9.22279 9.22439 9.21166 9.26447 9.22502 9.30009L9.38311 9.73605L8.21238 9.53032C8.20303 9.52854 8.19368 9.52854 8.18432 9.52854C8.11307 9.5321 8.05785 9.59266 8.06097 9.66391Z', fill: '#C53A28', style: { fill: 'color(display-p3 0.7725 0.2275 0.1569)', fillOpacity: 1 }, key: 'd' }),
+]);
+
+FlagCanada.displayName = 'FlagCanada';
+export { FlagCanada };

package/dist/flags/FlagCroatia.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagCroatia: FlagIconComponent;

package/dist/flags/FlagCroatia.mjs

@@ -0,0 +1,30 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagCroatia = createFlagIcon('flag-croatia', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 3, fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 2, y: 9.5, width: 12, height: 3, fill: '#100E91', style: { fill: 'color(display-p3 0.0627 0.0549 0.5686)', fillOpacity: 1 }, key: 'c' }),
+  createElement('path', { d: 'M7.99975 10.25C8.96079 10.25 9.74744 9.47902 9.74744 8.53629V6.5H6.25244V8.53629C6.25244 9.47864 7.03871 10.25 8.00013 10.25H7.99975Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'd' }),
+  createElement('path', { d: 'M8.00026 10.2058C8.92876 10.2058 9.68851 9.446 9.68851 8.5175V6.5H6.31201V8.5175C6.31201 9.446 7.07176 10.2058 8.00026 10.2058Z', fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'e' }),
+  createElement('path', { d: 'M8.32446 10.1204C8.2552 10.1346 8.18467 10.1448 8.11279 10.1497C8.03748 10.1542 7.96143 10.1541 7.88574 10.1497C7.81422 10.1444 7.74371 10.1346 7.6748 10.1204V9.43555H8.32446V10.1204Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'f' }),
+  createElement('path', { d: 'M7.02515 9.82666C6.88084 9.71758 6.75541 9.58546 6.65381 9.43555H7.02515V9.82666Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'g' }),
+  createElement('path', { d: 'M9.34473 9.43555C9.24351 9.58512 9.11806 9.7172 8.97412 9.82593V9.43555H9.34473Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'h' }),
+  createElement('path', { d: 'M7.6748 9.43555H7.02515V8.72144H7.6748V9.43555Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'i' }),
+  createElement('path', { d: 'M8.97412 9.43555H8.32446V8.72144H8.97412V9.43555Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'j' }),
+  createElement('path', { d: 'M7.6748 8.00806H7.02515V8.72144L6.38647 8.72217C6.37898 8.65918 6.37549 8.59514 6.37549 8.53027V8.00806H7.02515L7.02441 7.29395H7.6748V8.00806Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'k' }),
+  createElement('path', { d: 'M8.32446 8.72144H7.6748V8.00806H8.32446V8.72144Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'l' }),
+  createElement('path', { d: 'M9.62305 8.52954C9.62305 8.59478 9.61883 8.65918 9.61133 8.72217L8.97412 8.72144V8.00806H9.62305V8.52954Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'm' }),
+  createElement('path', { d: 'M8.97412 8.00806H8.32446V7.29395H8.97412V8.00806Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'n' }),
+  createElement('path', { d: 'M7.02441 7.29395H6.37476V6.58057H7.02441V7.29395Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'o' }),
+  createElement('path', { d: 'M8.32446 7.29395H7.6748V6.58057H8.32446V7.29395Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'p' }),
+  createElement('path', { d: 'M9.62305 6.57983V7.29395H8.97412V6.57983H9.62305Z', fill: '#EA3323', style: { fill: 'color(display-p3 0.9176 0.2000 0.1373)', fillOpacity: 1 }, key: 'q' }),
+  createElement('path', { d: 'M6.76455 5.28237L6.7638 5.28312L6.25943 5.09637L5.97705 5.552L6.08505 5.79762L6.3588 6.41937C6.56318 6.329 6.77655 6.25475 6.99668 6.19887L6.76455 5.28237Z', fill: '#0093DD', style: { fill: 'color(display-p3 0.0000 0.5765 0.8667)', fillOpacity: 1 }, key: 'r' }),
+  createElement('path', { d: 'M7.5849 5.14513L7.58415 5.14588L7.11765 4.87851L6.7644 5.28238L6.9969 6.19888C7.2129 6.14376 7.43528 6.10626 7.66328 6.08751L7.58528 5.14513H7.5849Z', fill: '#100E91', style: { fill: 'color(display-p3 0.0627 0.0549 0.5686)', fillOpacity: 1 }, key: 's' }),
+  createElement('path', { d: 'M8.41684 5.14551L8.41572 5.14626L7.99984 4.80576L7.58472 5.14588L7.66272 6.08826C7.77372 6.07926 7.88622 6.07401 7.99984 6.07401C8.11347 6.07401 8.22672 6.07888 8.33847 6.08826L8.41684 5.14588V5.14551Z', fill: '#0093DD', style: { fill: 'color(display-p3 0.0000 0.5765 0.8667)', fillOpacity: 1 }, key: 't' }),
+  createElement('path', { d: 'M9.23774 5.28276H9.23662L8.88262 4.87851L8.41724 5.14513L8.33887 6.08751C8.56687 6.10626 8.78924 6.14413 9.00524 6.19888L9.23812 5.28238L9.23774 5.28276Z', fill: '#100E91', style: { fill: 'color(display-p3 0.0627 0.0549 0.5686)', fillOpacity: 1 }, key: 'u' }),
+  createElement('path', { d: 'M9.64039 6.41937L10.0229 5.55237L9.74052 5.09674L9.23727 5.28312L9.00439 6.19962C9.22377 6.25549 9.43639 6.32974 9.64002 6.41974L9.64039 6.41937Z', fill: '#0093DD', style: { fill: 'color(display-p3 0.0000 0.5765 0.8667)', fillOpacity: 1 }, key: 'v' }),
+]);
+
+FlagCroatia.displayName = 'FlagCroatia';
+export { FlagCroatia };

package/dist/flags/FlagCyprus.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagCyprus: FlagIconComponent;

package/dist/flags/FlagCyprus.mjs

@@ -0,0 +1,33 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagCyprus = createFlagIcon('flag-cyprus', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M8.20843 10.5386L8.12421 10.5781L8.11176 10.5818L8.31903 10.7349C8.31667 10.7369 8.28683 10.7615 8.25751 10.7883C8.24402 10.8007 8.227 10.817 8.21503 10.8301C8.21021 10.8353 8.20519 10.841 8.20111 10.8469C8.19891 10.851 8.19672 10.8557 8.19452 10.8601C8.19264 10.8594 8.18939 10.8557 8.18939 10.8557L8.18719 10.8542C8.17902 10.8464 8.1712 10.8386 8.16376 10.8301C8.14388 10.8076 8.11743 10.774 8.09418 10.7451C8.04813 10.6875 8.00982 10.6381 8.00262 10.6287L7.99969 10.6257L7.9975 10.6287C7.99038 10.638 7.95197 10.6875 7.90594 10.7451C7.88232 10.774 7.85551 10.8076 7.83563 10.8301C7.82822 10.8386 7.82034 10.8465 7.81219 10.8542L7.81073 10.8557C7.80923 10.8572 7.80675 10.8594 7.80487 10.8601C7.80302 10.8557 7.80086 10.851 7.79828 10.8469C7.79417 10.841 7.78921 10.8353 7.78436 10.8301C7.77236 10.817 7.75538 10.8007 7.74188 10.7883C7.71203 10.7611 7.68138 10.7357 7.68036 10.7349L7.88837 10.5818L7.87518 10.5781L7.79095 10.5386L7.83636 10.488L7.99091 10.554L7.99969 10.5562L8.00848 10.554L8.16302 10.488L8.20843 10.5386Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M7.31634 10.4463C7.41562 10.4463 7.53771 10.48 7.67816 10.5466C7.59493 10.5961 7.49986 10.6224 7.40277 10.6221C7.29859 10.6213 7.19681 10.5925 7.1076 10.5393C7.11846 10.521 7.13291 10.5055 7.15009 10.4932C7.1786 10.4718 7.23096 10.4463 7.31488 10.4463H7.31634Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'c' }),
+  createElement('path', { d: 'M8.68524 10.4463C8.76881 10.4467 8.82042 10.4722 8.8493 10.4932C8.86654 10.5052 8.88164 10.5209 8.89252 10.5393C8.80289 10.5922 8.70049 10.6209 8.59662 10.6221C8.49955 10.6224 8.40443 10.5961 8.32123 10.5466C8.46177 10.4799 8.58371 10.4463 8.68304 10.4463H8.68524Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'd' }),
+  createElement('path', { d: 'M7.32074 10.0823C7.38898 10.0823 7.5651 10.1167 7.73383 10.436C7.47623 10.399 7.36697 10.3069 7.32074 10.2354C7.29149 10.1919 7.2778 10.1392 7.28192 10.0867C7.29449 10.0837 7.30781 10.0823 7.32074 10.0823Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'e' }),
+  createElement('path', { d: 'M8.7182 10.0874C8.72229 10.1395 8.70861 10.1919 8.67938 10.2354C8.63282 10.3073 8.5235 10.4 8.2663 10.4368C8.43517 10.1178 8.60983 10.0831 8.67865 10.083C8.69175 10.083 8.7051 10.0844 8.7182 10.0874Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'f' }),
+  createElement('path', { d: 'M7.02484 10.2126C7.10997 10.2126 7.2399 10.2407 7.3764 10.373C7.31978 10.3809 7.26239 10.3851 7.20502 10.3855C7.12272 10.3855 7.05486 10.3751 7.00287 10.354L6.95599 10.3291C6.93237 10.3141 6.91344 10.2927 6.90106 10.2676C6.89661 10.2582 6.8945 10.248 6.89301 10.2375C6.92931 10.223 6.96833 10.2149 7.008 10.2134C7.01349 10.213 7.01899 10.2126 7.02484 10.2126Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'g' }),
+  createElement('path', { d: 'M8.97382 10.2134C8.98016 10.2134 8.98579 10.2134 8.99139 10.2134C9.03076 10.2145 9.06964 10.2233 9.10638 10.2383C9.10524 10.2487 9.10205 10.259 9.09759 10.2683C9.08526 10.2928 9.06681 10.3142 9.0434 10.3291C8.98831 10.3662 8.90449 10.3855 8.79437 10.3855C8.73737 10.3851 8.67961 10.3809 8.62299 10.373C8.75933 10.2408 8.88869 10.2134 8.97382 10.2134Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'h' }),
+  createElement('path', { d: 'M6.5495 10.1987C6.65825 10.1987 6.74229 10.2201 6.79779 10.2617C6.81304 10.2711 6.82478 10.2856 6.83002 10.3027C6.83114 10.3155 6.82478 10.3282 6.8139 10.335C6.78875 10.3536 6.74416 10.3639 6.68134 10.365H6.67255C6.55667 10.365 6.39692 10.3292 6.29755 10.2295C6.3732 10.2115 6.45073 10.2014 6.52826 10.1987H6.5495Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'i' }),
+  createElement('path', { d: 'M9.47186 10.1995C9.54984 10.2021 9.62685 10.2122 9.70258 10.2302C9.60319 10.3295 9.44378 10.365 9.32758 10.365H9.31879C9.25588 10.3639 9.21136 10.3537 9.18622 10.335C9.17541 10.3283 9.16907 10.3161 9.1701 10.3035C9.17535 10.2862 9.18696 10.2711 9.20233 10.2617C9.25782 10.2201 9.34121 10.1995 9.44989 10.1995H9.47186Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'j' }),
+  createElement('path', { d: 'M6.31366 9.88086C6.3924 9.88086 6.55317 9.91349 6.74213 10.135C6.5086 10.1268 6.38762 10.0605 6.32684 10.0061C6.30106 9.98331 6.27959 9.95615 6.26385 9.92554C6.25785 9.91391 6.25294 9.90167 6.24994 9.88892C6.26868 9.88329 6.28831 9.88013 6.3078 9.88013L6.31366 9.88086Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'k' }),
+  createElement('path', { d: 'M9.75018 9.88818C9.74718 9.90093 9.74227 9.91318 9.73627 9.9248C9.72052 9.95555 9.69915 9.98323 9.67328 10.0061C9.61247 10.0604 9.49133 10.1268 9.258 10.135C9.44691 9.91348 9.60768 9.88016 9.68646 9.88013H9.69232C9.71178 9.88014 9.73148 9.88257 9.75018 9.88818Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'l' }),
+  createElement('path', { d: 'M6.64178 9.80249C6.7245 9.80454 6.8661 9.83777 6.95892 10.0222L6.99554 10.1116C6.80767 10.0827 6.70096 10.0021 6.64471 9.93945C6.61028 9.90238 6.58393 9.85811 6.56781 9.80981C6.58649 9.80535 6.60624 9.80249 6.62567 9.80249H6.64178Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'm' }),
+  createElement('path', { d: 'M9.43158 9.80981C9.41546 9.85811 9.38949 9.90238 9.35468 9.93945C9.29843 10.0021 9.19172 10.0831 9.00384 10.1116C9.09159 9.84795 9.26384 9.80474 9.35834 9.80249H9.37445C9.39375 9.80288 9.41265 9.80538 9.43158 9.80981Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'n' }),
+  createElement('path', { d: 'M5.84491 9.83691C5.88766 9.83691 5.93035 9.84112 5.97235 9.84937C6.06714 9.86927 6.15155 9.92305 6.21039 10.0002C6.15152 10.0145 6.09096 10.0208 6.03021 10.0208C5.97063 10.0207 5.91105 10.0137 5.85297 9.99951C5.75472 9.97514 5.71203 9.93753 5.69403 9.91016C5.68623 9.89896 5.68089 9.88622 5.67865 9.8728C5.67828 9.86758 5.67828 9.86228 5.67865 9.85669C5.72919 9.84396 5.78151 9.83731 5.83392 9.83691H5.84491Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'o' }),
+  createElement('path', { d: 'M10.1647 9.83691C10.2169 9.83729 10.2701 9.84467 10.3207 9.85742C10.3215 9.86256 10.3207 9.86766 10.32 9.8728C10.3178 9.8863 10.3125 9.89964 10.3046 9.91089C10.2865 9.93785 10.2441 9.97486 10.1464 9.99951C10.0887 10.0137 10.0287 10.0207 9.96918 10.0208C9.90843 10.0211 9.84788 10.0138 9.789 9.99951C9.84749 9.9224 9.93227 9.86922 10.027 9.84937C10.069 9.84112 10.1117 9.83691 10.1545 9.83691H10.1647Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'p' }),
+  createElement('path', { d: 'M10.2336 9.46045C10.2212 9.59957 10.1201 9.68961 10.038 9.74023C9.98298 9.7739 9.92292 9.80028 9.86078 9.81787C9.92489 9.67389 9.99668 9.5706 10.0739 9.51172C10.1345 9.46537 10.1846 9.4583 10.2094 9.45825H10.2145C10.2209 9.45825 10.2272 9.45897 10.2336 9.46045Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'q' }),
+  createElement('path', { d: 'M5.78998 9.45752C5.81436 9.45753 5.86479 9.46494 5.92548 9.51099C6.00308 9.57022 6.07487 9.67282 6.13861 9.81714C6.07639 9.79951 6.01684 9.77324 5.96136 9.7395C5.87891 9.6889 5.77826 9.59946 5.76581 9.46045C5.77211 9.45934 5.77855 9.45828 5.78485 9.45825L5.78998 9.45752Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'r' }),
+  createElement('path', { d: 'M6.01849 9.36304C6.05409 9.36379 6.10906 9.3785 6.16937 9.4436C6.23863 9.51848 6.29966 9.64152 6.35248 9.80908C6.30206 9.78594 6.25527 9.75609 6.21332 9.71973C6.10422 9.62563 6.01903 9.50675 5.96503 9.37329C5.97846 9.36735 5.99259 9.36379 6.00751 9.36304H6.01849Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 's' }),
+  createElement('path', { d: 'M9.99335 9.3623C10.0078 9.36309 10.0224 9.36624 10.0358 9.37256C9.98183 9.50641 9.89664 9.62488 9.78754 9.71899C9.74516 9.75574 9.69718 9.78583 9.64618 9.80908C9.69903 9.64121 9.76142 9.51859 9.83075 9.4436C9.89112 9.37835 9.946 9.36343 9.98163 9.3623H9.99335Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 't' }),
+  createElement('path', { d: 'M5.32855 9.37769C5.52563 9.38335 5.61832 9.44105 5.6618 9.48828C5.68879 9.5164 5.70529 9.55221 5.70941 9.59082C5.70638 9.5911 5.67926 9.59375 5.6391 9.59375C5.58363 9.59374 5.52829 9.5892 5.47357 9.57983C5.41006 9.56817 5.37406 9.51412 5.35492 9.4707C5.34222 9.44081 5.33344 9.40944 5.32855 9.37769Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'u' }),
+  createElement('path', { d: 'M10.6708 9.37695C10.666 9.40917 10.6572 9.44037 10.6445 9.46997C10.6253 9.51347 10.5888 9.56748 10.5251 9.5791C10.4705 9.5888 10.4156 9.593 10.3603 9.59302C10.3179 9.59302 10.2892 9.59082 10.2892 9.59082C10.2934 9.55234 10.31 9.51636 10.3369 9.48828C10.3803 9.44104 10.4736 9.38259 10.6708 9.37695Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'v' }),
+  createElement('path', { d: 'M5.3139 8.89209C5.34005 8.89253 5.36777 8.90445 5.40546 8.93018C5.43996 8.95455 5.47251 8.98221 5.50214 9.01221C5.53958 9.04967 5.57499 9.08966 5.60907 9.13086C5.61346 9.13847 5.64741 9.19937 5.67352 9.2583C5.68665 9.2853 5.6968 9.31437 5.70355 9.34399C5.70602 9.35205 5.70604 9.36123 5.70355 9.36963C5.70243 9.37263 5.70032 9.37545 5.69769 9.37695C5.69584 9.37768 5.69331 9.37769 5.6911 9.37769H5.68744C5.65254 9.37165 5.59117 9.34486 5.52338 9.30591C5.44802 9.26279 5.38614 9.21641 5.35052 9.17554C5.31805 9.13846 5.29904 9.08002 5.2934 9.00195C5.29077 8.96633 5.29075 8.93027 5.29413 8.89502C5.3005 8.89277 5.30715 8.89209 5.3139 8.89209Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'w' }),
+  createElement('path', { d: 'M10.7053 8.89502C10.7083 8.93064 10.7094 8.9667 10.7067 9.00195C10.7011 9.07974 10.6814 9.13845 10.6489 9.17554C10.6132 9.21641 10.5514 9.26278 10.476 9.30591C10.4082 9.34488 10.3468 9.37169 10.312 9.37769H10.3083C10.306 9.37769 10.3036 9.3777 10.3017 9.37695C10.2991 9.37545 10.2977 9.37225 10.2966 9.36963C10.294 9.36114 10.294 9.35249 10.2966 9.34399C10.3033 9.31474 10.3135 9.28568 10.3266 9.2583C10.3528 9.19922 10.3865 9.13883 10.3911 9.13159C10.4244 9.08997 10.4601 9.04971 10.498 9.01221C10.5276 8.98226 10.5595 8.95452 10.5939 8.93018C10.6318 8.90431 10.66 8.89246 10.6862 8.89209C10.6928 8.89212 10.699 8.8932 10.7053 8.89502Z', fill: '#4E5B31', style: { fill: 'color(display-p3 0.3059 0.3569 0.1922)', fillOpacity: 1 }, key: 'x' }),
+  createElement('path', { d: 'M12.1395 4.88075C11.8931 4.9745 11.6977 5.05812 11.4555 5.15262C11.2931 5.24487 11.1168 5.40762 10.9072 5.40237C10.6815 5.4995 10.3717 5.81787 10.0342 5.86625C9.44922 5.96712 9.00597 6.19625 8.39659 6.1895C7.88284 6.095 7.34359 6.16775 6.88872 5.94237C6.99822 6.24575 6.99334 7.01 6.49684 6.86937C6.25234 6.68675 5.93097 6.719 5.71984 6.8135C5.26422 7.90812 4.57234 6.48612 4.95822 7.4285C5.01184 7.61562 4.93272 7.874 5.16259 7.95912C5.29497 8.02775 5.18509 8.29212 5.33284 8.31612C5.55259 8.50362 5.88109 8.56062 6.17434 8.69225C6.64347 8.63375 6.83622 8.47812 6.98322 8.96787C7.59559 9.02637 6.73534 8.72525 7.55734 8.46762C8.13972 8.5715 8.54922 8.16725 9.05509 8.07237C9.20284 7.91637 9.08772 7.62837 9.30034 7.52C9.50172 7.46637 9.70572 7.52037 9.86659 7.63212C10.0278 7.51212 10.215 7.42362 10.4122 7.51437C10.5896 7.59875 10.5626 7.58862 10.527 7.44387C10.3368 7.15362 9.99334 6.962 9.97347 6.66875C10.0125 6.269 10.2082 6.2945 10.5011 6.22175C10.6605 5.7425 11.3666 5.70687 11.6115 5.31575C11.7611 5.10837 12.1091 5.15525 12.1391 4.88037L12.1395 4.88075Z', fill: '#D57800', style: { fill: 'color(display-p3 0.8353 0.4706 0.0000)', fillOpacity: 1 }, key: 'y' }),
+]);
+
+FlagCyprus.displayName = 'FlagCyprus';
+export { FlagCyprus };

package/dist/flags/FlagCzechRepublic.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagCzechRepublic: FlagIconComponent;

package/dist/flags/FlagCzechRepublic.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagCzechRepublic = createFlagIcon('flag-czech-republic', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M2 12.5H14V8H8L2 12.5Z', fill: '#C62D25', style: { fill: 'color(display-p3 0.7765 0.1765 0.1451)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M2 3.5L8 8L2 12.5V3.5Z', fill: '#1E427B', style: { fill: 'color(display-p3 0.1176 0.2588 0.4824)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagCzechRepublic.displayName = 'FlagCzechRepublic';
+export { FlagCzechRepublic };

package/dist/flags/FlagDenmark.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagDenmark: FlagIconComponent;

package/dist/flags/FlagDenmark.mjs

@@ -0,0 +1,10 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagDenmark = createFlagIcon('flag-denmark', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#B92932', style: { fill: 'color(display-p3 0.7255 0.1608 0.1961)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M14 7.25H7.25V3.5H5.75V7.25H2V8.75H5.75V12.5H7.25V8.75H14V7.25Z', fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'b' }),
+]);
+
+FlagDenmark.displayName = 'FlagDenmark';
+export { FlagDenmark };

package/dist/flags/FlagEU.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagEU: FlagIconComponent;

package/dist/flags/FlagEU.mjs

@@ -0,0 +1,21 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagEU = createFlagIcon('flag-eu', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#112F95', style: { fill: 'color(display-p3 0.0667 0.1843 0.5843)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M7.89471 5.09229L7.9999 4.76889L8.10508 5.09229H8.44498L8.16985 5.29194L8.27503 5.61534L7.9999 5.41569L7.72476 5.61534L7.82995 5.29194L7.55481 5.09229H7.89471Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M7.9999 10.3847L8.10508 10.7081H8.44498L8.16985 10.9077L8.27503 11.2311L7.9999 11.0315L7.72476 11.2311L7.82995 10.9077L7.55481 10.7081H7.89471L7.9999 10.3847Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'c' }),
+  createElement('path', { d: 'M5.19216 8.22357L5.4673 8.42322L5.36211 8.09982L5.63725 7.90017H5.29735L5.19216 7.57677L5.08697 7.90017H4.74707L5.02221 8.09982L4.91702 8.42322L5.19216 8.22357Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'd' }),
+  createElement('path', { d: 'M6.49107 5.46848L6.59584 5.14508L6.70103 5.46848H7.04093L6.76621 5.66813L6.87098 5.99153L6.59584 5.79188L6.32112 5.99153L6.42589 5.66813L6.15076 5.46848H6.49107Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'e' }),
+  createElement('path', { d: 'M5.56826 6.17262L5.46307 6.49602H5.12317L5.39831 6.69609L5.29312 7.01949L5.56826 6.81942L5.84339 7.01949L5.73821 6.69609L6.01334 6.49602H5.67344L5.56826 6.17262Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'f' }),
+  createElement('path', { d: 'M5.56826 8.98052L5.67344 9.30392H6.01334L5.73821 9.50398L5.84339 9.82738L5.56826 9.62732L5.29312 9.82738L5.39831 9.50398L5.12317 9.30392H5.46307L5.56826 8.98052Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'g' }),
+  createElement('path', { d: 'M6.70103 10.3319L6.59584 10.0085L6.49107 10.3319H6.15076L6.42589 10.5315L6.32112 10.8549L6.59584 10.6553L6.87098 10.8549L6.76621 10.5315L7.04093 10.3319H6.70103Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'h' }),
+  createElement('path', { d: 'M10.9132 7.90017H11.2531L10.978 8.09982L11.0831 8.42322L10.808 8.22357L10.5329 8.42322L10.6381 8.09982L10.3629 7.90017H10.7028L10.808 7.57677L10.9132 7.90017Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'i' }),
+  createElement('path', { d: 'M9.40432 5.14508L9.29913 5.46848H8.95923L9.23395 5.66813L9.12918 5.99153L9.40432 5.79188L9.67904 5.99153L9.57427 5.66813L9.8494 5.46848H9.50909L9.40432 5.14508Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'j' }),
+  createElement('path', { d: 'M10.1568 7.01949L10.262 6.69609L9.98682 6.49602H10.3267L10.4319 6.17262L10.5371 6.49602H10.877L10.6019 6.69609L10.707 7.01949L10.4319 6.81942L10.1568 7.01949Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'k' }),
+  createElement('path', { d: 'M10.5371 9.30392L10.4319 8.98052L10.3267 9.30392H9.98682L10.262 9.50398L10.1568 9.82738L10.4319 9.62732L10.707 9.82738L10.6019 9.50398L10.877 9.30392H10.5371Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'l' }),
+  createElement('path', { d: 'M9.40432 10.0085L9.50909 10.3319H9.8494L9.57427 10.5315L9.67904 10.8549L9.40432 10.6553L9.12918 10.8549L9.23395 10.5315L8.95923 10.3319H9.29913L9.40432 10.0085Z', fill: '#F6CD46', style: { fill: 'color(display-p3 0.9647 0.8039 0.2745)', fillOpacity: 1 }, key: 'm' }),
+]);
+
+FlagEU.displayName = 'FlagEU';
+export { FlagEU };

package/dist/flags/FlagEstonia.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagEstonia: FlagIconComponent;

package/dist/flags/FlagEstonia.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagEstonia = createFlagIcon('flag-estonia', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 3, fill: '#3271C9', style: { fill: 'color(display-p3 0.1961 0.4431 0.7882)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 2, y: 6.5, width: 12, height: 3, fill: 'black', style: { fill: 'black', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagEstonia.displayName = 'FlagEstonia';
+export { FlagEstonia };

package/dist/flags/FlagFinland.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagFinland: FlagIconComponent;

package/dist/flags/FlagFinland.mjs

@@ -0,0 +1,10 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagFinland = createFlagIcon('flag-finland', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M14 7.25H7.25V3.5H5.75V7.25H2V8.75H5.75V12.5H7.25V8.75H14V7.25Z', fill: '#0E2A69', style: { fill: 'color(display-p3 0.0549 0.1647 0.4118)', fillOpacity: 1 }, key: 'b' }),
+]);
+
+FlagFinland.displayName = 'FlagFinland';
+export { FlagFinland };

package/dist/flags/FlagFrance.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagFrance: FlagIconComponent;

package/dist/flags/FlagFrance.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagFrance = createFlagIcon('flag-france', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 3.5, width: 3.99975, height: 9, fill: '#092050', style: { fill: 'color(display-p3 0.0353 0.1255 0.3137)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 10.0024, y: 3.5, width: 3.9975, height: 9, fill: '#BE2A2C', style: { fill: 'color(display-p3 0.7451 0.1647 0.1725)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagFrance.displayName = 'FlagFrance';
+export { FlagFrance };

package/dist/flags/FlagGermany.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagGermany: FlagIconComponent;

package/dist/flags/FlagGermany.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagGermany = createFlagIcon('flag-germany', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: 'black', style: { fill: 'black', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 6.5, width: 12, height: 3, fill: '#CC2B1D', style: { fill: 'color(display-p3 0.8000 0.1686 0.1137)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 2, y: 9.5, width: 12, height: 3, fill: '#F8D147', style: { fill: 'color(display-p3 0.9725 0.8196 0.2784)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagGermany.displayName = 'FlagGermany';
+export { FlagGermany };

package/dist/flags/FlagGreece.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagGreece: FlagIconComponent;

package/dist/flags/FlagGreece.mjs

@@ -0,0 +1,15 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagGreece = createFlagIcon('flag-greece', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('path', { d: 'M14 12.5H2V11.5024H14V12.5Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'b' }),
+  createElement('path', { d: 'M14 10.4976H2V9.5H14V10.4976Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'c' }),
+  createElement('path', { d: 'M2 6.50366H3.99731V8.49512H2V6.50366Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'd' }),
+  createElement('path', { d: 'M6.99512 7.49756H14V8.49512H4.99854V6.50366H6.99512V7.49756Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'e' }),
+  createElement('path', { d: 'M14 5.50244V6.5H6.99512V5.50244H14Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'f' }),
+  createElement('path', { d: 'M14 4.49756H6.99512V5.50244H4.99854V3.50586H3.99658V5.50244H2V3.5H14V4.49756Z', fill: '#295CAB', style: { fill: 'color(display-p3 0.1608 0.3608 0.6706)', fillOpacity: 1 }, key: 'g' }),
+]);
+
+FlagGreece.displayName = 'FlagGreece';
+export { FlagGreece };

package/dist/flags/FlagHungary.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagHungary: FlagIconComponent;

package/dist/flags/FlagHungary.mjs

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { createFlagIcon } from '../createFlagIcon.mjs';
+
+const FlagHungary = createFlagIcon('flag-hungary', [
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 9, fill: '#F2F2F2', style: { fill: 'color(display-p3 0.9490 0.9490 0.9490)', fillOpacity: 1 }, key: 'a' }),
+  createElement('rect', { x: 2, y: 3.5, width: 12, height: 3, fill: '#BE373C', style: { fill: 'color(display-p3 0.7451 0.2157 0.2353)', fillOpacity: 1 }, key: 'b' }),
+  createElement('rect', { x: 2, y: 9.5, width: 12, height: 3, fill: '#4F6F52', style: { fill: 'color(display-p3 0.3098 0.4353 0.3216)', fillOpacity: 1 }, key: 'c' }),
+]);
+
+FlagHungary.displayName = 'FlagHungary';
+export { FlagHungary };

package/dist/flags/FlagIreland.d.ts

@@ -0,0 +1,2 @@
+import { FlagIconComponent } from '../createFlagIcon.mjs';
+export declare const FlagIreland: FlagIconComponent;