From f8cd2849d2901dcb3d442209f7ad84b243e2d3d2 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 16 Dec 2022 10:47:03 +0800
Subject: [PATCH] feat: add plugin for svg icons

---
 src/assets/icons/index.ts | 22 ----------------------
 src/components/Icon.vue   | 11 ++++++++---
 vite.config.ts            |  4 ++--
 3 files changed, 10 insertions(+), 27 deletions(-)
 delete mode 100755 src/assets/icons/index.ts

diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
deleted file mode 100755
index da2a5592..00000000
--- a/src/assets/icons/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const requireAll = (requireContext: Recordable) => Object.values(requireContext);
-const req = import.meta.glob("./*.svg", { eager: true });
-
-requireAll(req);
-console.log(requireAll(req));
-export {};
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 7bba5ce0..f2e6218e 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -24,17 +24,22 @@ limitations under the License. -->
       loading,
     }"
   >
-    <use :xlink:href="`#${iconName}`"></use>
+    <use :href="symbolId"></use>
   </svg>
 </template>
 <script lang="ts" setup>
-  import "@/assets/icons/index";
+  import { computed } from "vue";
   /*global defineProps */
-  defineProps({
+  const props = defineProps({
     iconName: { type: String, default: "" },
     size: { type: String, default: "sm" },
     loading: { type: Boolean, default: false },
+    prefix: {
+      type: String,
+      default: "icon",
+    },
   });
+  const symbolId = computed(() => `#${props.prefix}-${props.iconName}`);
 </script>
 <style lang="scss" scoped>
   .icon {
diff --git a/vite.config.ts b/vite.config.ts
index 4c3ce2a3..c4fdafb7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,9 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       }),
       createSvgIconsPlugin({
         // Specify the icon folder to be cached
-        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+        iconDirs: [path.resolve(__dirname, "./src/assets/icons")],
         // Specify symbolId format
-        symbolId: "[dir]-[name]",
+        symbolId: "icon-[dir]-[name]",
       }),
     ],
     resolve: {