feat: add plugin for svg icons

src/assets/icons/index.ts

@@ -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 {};

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 {

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: {