feat(projects): 添加SvgIcon,配置vite plugin

src/components/svg/SvgIcon.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg :style="svgStyle" class="svg-icon" aria-hidden="true">
+    <use :xlink:href="symbolId" :fill="fill" />
+  </svg>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon'
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [String, Number],
+    default: 30
+  },
+  color: {
+    type: String,
+    default: ''
+  }
+});
+const svgStyle = computed(() => {
+  const { size } = props;
+  let s = `${size}`;
+  s = `${s.replace('px', '')}px`;
+  return {
+    width: s,
+    height: s
+  };
+});
+const fill = computed(() => props.color || 'currentColor');
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+<style scoped>
+.svg-icon {
+  vertical-align: -0.15em;
+  overflow: hidden;
+}
+</style>

src/components/svg/index.ts

@@ -4,5 +4,6 @@ import SvgServiceError from './SvgServiceError.vue';
 import SvgEmptyData from './SvgEmptyData.vue';
 import SvgNetworkError from './SvgNetworkError.vue';
 import SvgBanner from './SvgBanner.vue';
+import SvgIcon from './SvgIcon.vue';
 
-export { SvgNoPermission, SvgNotFound, SvgServiceError, SvgEmptyData, SvgNetworkError, SvgBanner };
+export { SvgNoPermission, SvgNotFound, SvgServiceError, SvgEmptyData, SvgNetworkError, SvgBanner, SvgIcon };