项目微调

frontend/src/components/StaticExtend/SvgIcon/index.ts

@@ -0,0 +1,2 @@
+import SvgIcon from './src/SvgIcon.vue'
+export { SvgIcon }

frontend/src/components/StaticExtend/SvgIcon/src/SvgIcon.vue

@@ -0,0 +1,88 @@
+/**
+* @name SvgIcon
+* @description svg图标组件
+* 支持定义名称、颜色、大小、旋转
+* @example <SvgIcon name="icon-name" color="#fff" size="20" spin />
+*/
+<template>
+  <svg
+    aria-hidden="true"
+    :class="['svg-icon', spin && 'svg-icon-spin']"
+    :style="getStyle"
+  >
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>
+<script setup lang='ts'>
+defineOptions({
+  name: 'SvgIcon',
+})
+import type { CSSProperties } from 'vue'
+// 定义组件对外暴露的props
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: [Number, String],
+    default: 20,
+  },
+  spin: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+//计算属性获取symbolId
+const symbolId = computed(() => {
+  return `#${props.prefix}-${props.name}`
+})
+
+//计算属性获取svg样式
+const getStyle = computed((): CSSProperties => {
+  const { size } = props
+  let s = `${size}`
+  // 确保size为px单位
+  s = `${s.replace('px', '')}px`
+  return {
+    width: s,
+    height: s,
+  }
+})
+
+
+</script>
+<style scoped>
+
+.svg-icon {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+
+.svg-icon-spin {
+  animation: loadingCircle 1.2s infinite linear;
+}
+
+/* 旋转动画 */
+@keyframes loadingCircle {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+</style>