feat(icon): simplify usage

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@computas/designsystem",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "The Computas design system",
   "type": "module",
   "license": "MIT",

src/components/icon/Overview.mdx

@@ -9,8 +9,8 @@ import {
   Title,
 } from "@storybook/blocks";
 
-import { iconNames } from "./icon-names";
 import * as stories from "./icon.stories";
+import * as cxIcons from "./svgRegistry";
 
 <Meta of={stories} />
 
@@ -25,11 +25,9 @@ function with an object containing your icons, as such:
 import { addIcons } from '@computas/designsystem/icon';
  
 // import the icon data (SVG string)
-import download from '@computas/designsystem/icon/svg/download?raw';
+import { download } from '@computas/designsystem/icon/svgRegistry';
 
-addIcons({
-download: { svg: download }
-});
+addIcons(download);
 `}
 language="typescript"
 dark
@@ -68,9 +66,9 @@ If you try to use an icon that is not registered, the component throws an error.
 ## Icon overview
 
 <IconGallery>
-  {iconNames.map((iconName) => (
-    <IconItem name={iconName} key={iconName}>
-      <cx-icon name={iconName} />
+  {Object.entries(cxIcons).map(([, icon]) => (
+    <IconItem name={icon.name} key={icon.name}>
+      <cx-icon name={icon.name} />
     </IconItem>
   ))}
 </IconGallery>

src/components/icon/icon.stories.ts

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
+import { addIcons } from './store';
+import * as cxIcons from './svgRegistry';
+
+const iconObj = Object.entries(cxIcons).map(([_, icon]) => icon);
+addIcons(...iconObj);
+
 import './icon';
-import './register-demo-icons';
 
 export default {
   title: 'Components/Icon',

src/components/icon/index.ts

@@ -1,2 +1,3 @@
 export * from './icon';
 export { addIcons } from './store';
+export * from './svgRegistry';

src/components/icon/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "private": "true",
   "scripts": {
-    "build": "tsup && cp -r svg ../../../dist/icon"
+    "build": "tsup"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

src/components/icon/store.ts

@@ -1,12 +1,11 @@
-interface IconData {
-  svg: string;
-}
-type IconRegistry = Record<string, IconData>;
+import type { SVGIcon } from './svgRegistry';
 
-let _cxGlobalIconsStore: IconRegistry = {};
+type IconRegistry = Record<string, SVGIcon>;
+
+const _cxGlobalIconsStore: IconRegistry = {};
 
 /**
- * Add icons to the global icon store to make them available for use in the `<e-icon>/Icon` component.
+ * Add icons to the global icon store to make them available for use in the `<cx-icon>/CxIcon` component.
  *
  * You can add multiple icons at once. The key of the input object is the icon name corresponding to the `name`
  * prop in the `<e-icon>/Icon` component. While this can be any string, it is recommended to use the icon name as the key.
@@ -18,18 +17,18 @@ let _cxGlobalIconsStore: IconRegistry = {};
  * import { addIcons } from '@computas/designsystem/icon';
  *
  * // import the icon data (SVG string)
- * import download from '@computas/designsystem/icon/svg/download?raw';
+ * import { bin, download } from '@computas/designsystem/icon/svgRegistry';
  *
- * addIcons({
- *  download: { svg: download }
- * });
+ * addIcons(bin, download);
  * ```
  */
-export const addIcons = (icons: IconRegistry) => {
-  _cxGlobalIconsStore = { ..._cxGlobalIconsStore, ...icons };
+export const addIcons = (...icons: SVGIcon[]) => {
+  icons.forEach((icon) => {
+    _cxGlobalIconsStore[icon.name] = icon;
+  });
 };
 
-export const getIcon = (name: string): IconData | undefined => {
+export const getIcon = (name: string): SVGIcon | undefined => {
   // Need to check `name` because it can be `undefined` on initial render depending on property vs attribute
   if (name && !_cxGlobalIconsStore[name]) {
     throw new Error(