refactor: move icons to ui-kit

client-app/ui-kit/components/atoms/icon/vc-icon.stories.ts

@@ -12,7 +12,7 @@ const Template: StoryFn<typeof VcIcon> = (args) => ({
   template: '<VcIcon v-bind="args" />',
 });
 
-const iconList = import.meta.glob("@/assets/icons/basic/*.svg", { eager: true });
+const iconList = import.meta.glob("../../../icons/*.svg", { eager: true });
 
 const TemplateList: StoryFn<typeof VcIcon> = (args) => ({
   components: { VcIcon },

client-app/ui-kit/components/atoms/icon/vc-icon.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import DOMPurify from "dompurify";
 import { ref, computed, watch } from "vue";
+import { loadIconRaw } from "@/ui-kit/utilities";
 
 interface IProps {
   name?: string;
@@ -29,8 +29,7 @@ const style = computed(() =>
 const sizeClass = computed(() => (typeof props.size === "string" ? `vc-icon--size--${props.size}` : ""));
 
 async function loadIcon(name?: string) {
-  const response = (await import(`@/assets/icons/basic/${name}.svg?raw`)) as { default: string };
-  icon.value = DOMPurify.sanitize(response.default);
+  icon.value = await loadIconRaw(name);
 }
 
 watch(

client-app/ui-kit/components/molecules/shape/vc-shape.vue

@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import { loadIcon } from "../../../utilities";
 
 interface IProps {
   size?: number | string;
@@ -32,14 +33,10 @@ const style = computed(() => ({
   maskImage: iconUrl.value ? `url("${iconUrl.value}")` : "none",
 }));
 
-function loadIcon(name?: string) {
-  iconUrl.value = new URL(`/client-app/assets/icons/basic/${name}.svg`, import.meta.url).href ?? "";
-}
-
 watch(
   () => props.mask,
   (newIconName: string) => {
-    loadIcon(newIconName);
+    iconUrl.value = loadIcon(newIconName);
   },
   { immediate: true },
 );

client-app/ui-kit/utilities/images.ts

@@ -0,0 +1,10 @@
+import DOMPurify from "dompurify";
+
+export function loadIcon(name?: string): string {
+  return new URL(`../icons/${name}.svg`, import.meta.url).href ?? "";
+}
+
+export async function loadIconRaw(name?: string): Promise<string> {
+  const response = (await import(`../icons/${name}.svg?raw`)) as { default: string };
+  return DOMPurify.sanitize(response.default);
+}