feat(icon): finish icon implementation

dist/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.6",
+    "dompurify": "^3.2.2",
     "lit": "^3.2.1"
   },
   "peerDependencies": {

package.json

@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.6",
+    "dompurify": "^3.2.2",
     "lit": "^3.2.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "^3.2.2",
-    "@computas/designsystem-breadcrumbs": "workspace:*",
     "@computas/designsystem-icon": "workspace:*",
     "@storybook/addon-essentials": "^8.4.6",
     "@storybook/addon-themes": "^8.4.6",

src/components/icon/Overview.mdx

@@ -0,0 +1,88 @@
+import {
+  Canvas,
+  Description,
+  IconGallery,
+  IconItem,
+  Meta,
+  Source,
+  Subtitle,
+  Title,
+} from "@storybook/blocks";
+
+import { iconNames } from "./icon-names";
+import * as stories from "./icon.stories";
+
+<Meta of={stories} />
+
+<Title />
+
+The icon component is implemented as a web component where you manually register each icon you want to use in your application.
+This is to ensure that you only include the icons that you need in your bundle. To register a an icon for use, please call the `addIcons()`
+function with an object containing your icons, as such:
+
+<Source
+  code={`
+ import { addIcons } from '@computas/designsystem/icon';
+ 
+// import the icon data (SVG string)
+import download from '@computas/designsystem/icon/svg/download?raw';
+
+addIcons({
+download: { svg: download }
+});
+`}
+language="ts"
+dark
+/>
+
+The registration of icons is usually done at the root level of your application, and makes the icon available globally.
+After registering an icon, use it through the `cx-icon` component. Start by importing the component:
+
+<Source
+  code={`
+// Web component
+import '@computas/designsystem/icon';
+
+// React
+import { CxIcon } from '@computas/designsystem/icon/react';
+`}
+language="ts"
+dark
+/>
+
+Then simply use the component and provide the name of the icon you wish to display:
+
+<Source
+  code={`
+// Web component
+<cx-icon name="download" />
+
+// React
+
+<CxIcon name="download" />
+`} language="ts" dark />
+
+If you try to use an icon that is not registered, the component throws an error.
+
+<br />
+## Icon overview
+
+<IconGallery>
+  {iconNames.map((iconName) => (
+    <IconItem name={iconName} key={iconName}>
+      <cx-icon name={iconName} />
+    </IconItem>
+  ))}
+</IconGallery>
+
+## Sizing
+
+The icon component can be sized through the `size` prop. The prop accepts the same values as our spacing tokens, in other words a number between 1 and 20.
+
+<Canvas of={stories.Sizing} />
+
+## Color
+
+The icon component can be sized through the `size` prop. The prop accepts the same values as our spacing tokens, in other words a number between 1 and 20.
+
+<Canvas of={stories.Color} />

src/components/icon/icon-names.ts

@@ -0,0 +1,69 @@
+export const iconNames = [
+  'add',
+  'agenda',
+  'alarm',
+  'ansatte',
+  'attachment',
+  'baby',
+  'back',
+  'beer',
+  'bin',
+  'bookmark',
+  'calendar-filled',
+  'calendar',
+  'check-circle',
+  'check',
+  'close',
+  'computas',
+  'default-presenter',
+  'digital-cafe',
+  'down',
+  'download',
+  'edit',
+  'email',
+  'error-circle',
+  'event-games',
+  'event-general',
+  'event-social',
+  'eventer',
+  'external',
+  'flex',
+  'forward',
+  'history',
+  'hyperlink',
+  'image',
+  'info-circle',
+  'kks',
+  'laptop',
+  'left',
+  'location',
+  'log-out',
+  'message',
+  'microphone',
+  'min-side-headphones',
+  'min-side',
+  'multiple-actions-question',
+  'phone',
+  'play',
+  'preview',
+  'qr',
+  'right',
+  'search',
+  'security',
+  'send-email',
+  'settings',
+  'sick',
+  'slack',
+  'sort-ascending',
+  'sort-descending',
+  'sorting',
+  'star-add',
+  'star-added',
+  'tech',
+  'three-dot-menu-horizontal',
+  'time',
+  'up',
+  'upload',
+  'vacation',
+  'warning',
+];

src/components/icon/icon.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './icon';
+import './register-demo-icons';
+
+export default {
+  title: 'Components/Icon',
+} satisfies Meta;
+
+export const Sizing: StoryObj = {
+  render: () => html`
+    <cx-icon name="download" size="1" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="2" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="3" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="4" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="5" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="6" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="7" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="8" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="9" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="10" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="11" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="12" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="13" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="14" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="15" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="16" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="17" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="18" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="19" class="cx-mr-4"></cx-icon>
+<cx-icon name="download" size="20"></cx-icon>
+  `,
+};
+
+export const Color: StoryObj = {
+  render: () => html`
+    <style>
+      .danger-icon {
+        color: var(--cx-color-signal-danger);
+      }
+      
+      .info-icon {
+        color: var(--cx-color-signal-info);
+      }
+      
+      .success-icon {
+        color: var(--cx-color-signal-success);
+      }
+    </style>
+
+    <cx-icon name="star-added" size="10" class="cx-mr-4 danger-icon"></cx-icon>
+    <cx-icon name="star-added" size="10" class="cx-mr-4 info-icon"></cx-icon>
+    <cx-icon name="star-added" size="10" class="cx-mr-4 success-icon"></cx-icon>
+  `,
+};