feat: component flags (#5761)

Author: lisalupi

.changeset/sharp-books-sing.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": minor
+---
+
+New component `Flags`

packages/icons/package.json

@@ -90,6 +90,18 @@
       "require": "./dist/components/Logo/__generated__/*.cjs",
       "import": "./dist/components/Logo/__generated__/*.js",
       "default": "./dist/components/Logo/__generated__/*.js"
+    },
+    "./flags": {
+      "types": "./dist/components/Flags/index.d.ts",
+      "require": "./dist/components/Flags/index.cjs",
+      "import": "./dist/components/Flags/index.js",
+      "default": "./dist/components/Flags/index.js"
+    },    
+    "./flags/*": {
+      "types": "./dist/components/Flags/__generated__/*.d.ts",
+      "require": "./dist/components/Flags/__generated__/*.cjs",
+      "import": "./dist/components/Flags/__generated__/*.js",
+      "default": "./dist/components/Flags/__generated__/*.js"
     }
   },
   "size-limit": [

packages/icons/src/components/Flags/Icon.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { SIZES } from './constant'
+import { flag } from './style.css'
+
+export type IconProps = {
+  size?: keyof typeof SIZES
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Logo component is used to render a set of flags. Their style cannot be changed
+ */
+export const Icon = ({ size = 'medium', className, children }: IconProps) => (
+  <svg
+    className={`${className ? `${className} ` : ''}${flag[size]}`}
+    viewBox="0 0 24 24"
+  >
+    {children}
+  </svg>
+)

packages/icons/src/components/Flags/__generated__/FranceFlag.tsx

@@ -0,0 +1,11 @@
+The Flags component is a collection of flags designed for use within Ultraviolet's components in particular cases, such region selectors in `SelectInput`.
+
+## + How to add a new one?
+
+1. Add the `.svg` file into `packages/icons/src/components/Flags/assets`
+2. Then run the following command:
+`pnpm run icons:update` at root of the project. The icons component will be generated automatically using this command.
+<br />
+<br />
+**IMPORTANT:** Make sure that the icon name is unique, otherwise it will override the existing one.
+The name of the svg should be snake-case.