Delete unused icons, update story

cloudblue · Jun 5, 2024 · 4aac267 · 4aac267
1 parent 7432b5f
commit 4aac267
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 100 deletions.
diff --git a/components/src/stories/Icon.stories.js b/components/src/stories/Icon.stories.js
@@ -3,10 +3,6 @@ import registerWidget from '~core/registerWidget';
 
 import * as iconsAnimated from '@cloudblueconnect/material-svg/animated';
 import * as iconsBaseline from '@cloudblueconnect/material-svg/baseline';
-import * as iconsOutline from '@cloudblueconnect/material-svg/outline';
-import * as iconsRound from '@cloudblueconnect/material-svg/round';
-import * as iconsSharp from '@cloudblueconnect/material-svg/sharp';
-import * as iconsTwotone from '@cloudblueconnect/material-svg/twotone';
 
 registerWidget('ui-icon', Icon);
 
@@ -88,98 +84,4 @@ export const Baseline = {
   },
 };
 
-export const Outline = {
-  name: 'All outline',
-  render: () => ({
-    setup() {
-      return {};
-    },
-    template:
-      '<div className="sb-all-icons">' +
-      Object.keys(iconsOutline)
-        .map(
-          (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
-        )
-        .join('') +
-      '</div>',
-  }),
-  args: {},
-  argTypes: {
-    iconName: { control: false },
-    size: { control: false },
-    color: { control: false },
-  },
-};
-
-export const Round = {
-  name: 'All round',
-  render: () => ({
-    setup() {
-      return {};
-    },
-    template:
-      '<div className="sb-all-icons">' +
-      Object.keys(iconsRound)
-        .map(
-          (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
-        )
-        .join('') +
-      '</div>',
-  }),
-  args: {},
-  argTypes: {
-    iconName: { control: false },
-    size: { control: false },
-    color: { control: false },
-  },
-};
 
-export const Sharp = {
-  name: 'All sharp',
-  render: () => ({
-    setup() {
-      return {};
-    },
-    template:
-      '<div className="sb-all-icons">' +
-      Object.keys(iconsSharp)
-        .map(
-          (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
-        )
-        .join('') +
-      '</div>',
-  }),
-  args: {},
-  argTypes: {
-    iconName: { control: false },
-    size: { control: false },
-    color: { control: false },
-  },
-};
-
-export const Twotone = {
-  name: 'All twotone',
-  render: () => ({
-    setup() {
-      return {};
-    },
-    template:
-      '<div className="sb-all-icons">' +
-      Object.keys(iconsTwotone)
-        .map(
-          (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
-        )
-        .join('') +
-      '</div>',
-  }),
-  args: {},
-  argTypes: {
-    iconName: { control: false },
-    size: { control: false },
-    color: { control: false },
-  },
-};
diff --git a/components/src/widgets/icon/widget.vue b/components/src/widgets/icon/widget.vue
@@ -9,7 +9,8 @@
 
 <script setup>
 import { defineOptions, computed } from 'vue';
-import * as icons from '@cloudblueconnect/material-svg';
+import * as iconsAnimated from '@cloudblueconnect/material-svg/animated';
+import * as iconsBaseline from '@cloudblueconnect/material-svg/baseline';
 defineOptions({
   name: 'Icon',
 });
@@ -40,8 +41,12 @@ const styles = computed(() => {
   };
 });
 
+const icons = computed(() => {
+  return {...iconsBaseline, ...iconsAnimated};
+});
+
 const icon = computed(() => {
-  return icons[props.iconName];
+  return icons.value[props.iconName];
 });
 </script>