From ce4e039f48001b47a2933e807f5410a9573781b9 Mon Sep 17 00:00:00 2001
From: Lsq128 <924500075@qq.com>
Date: Sat, 26 Feb 2022 23:47:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20svgIcon,=E6=B7=BB=E5=8A=A0t?=
 =?UTF-8?q?ype,=E8=B0=83=E6=95=B4size=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svg/SvgIcon.vue  | 42 ++++++++++++---------------------
 src/plugins/svg-icon.ts         |  7 ------
 src/views/plugin/icon/index.vue |  2 +-
 3 files changed, 16 insertions(+), 35 deletions(-)
 delete mode 100644 src/plugins/svg-icon.ts

diff --git a/src/components/svg/SvgIcon.vue b/src/components/svg/SvgIcon.vue
index 941af06cb..a01341360 100644
--- a/src/components/svg/SvgIcon.vue
+++ b/src/components/svg/SvgIcon.vue
@@ -1,43 +1,31 @@
 <template>
-  <svg :style="svgStyle" class="svg-icon" aria-hidden="true">
+  <svg 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
-  };
+interface Props {
+  /** icon前缀 */
+  prefix?: string;
+  /** icon 名称 */
+  name: string;
+  /** 填充颜色 */
+  color?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'icon',
+  name: '',
+  color: ''
 });
 const fill = computed(() => props.color || 'currentColor');
 const symbolId = computed(() => `#${props.prefix}-${props.name}`);
 </script>
 <style scoped>
 .svg-icon {
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
   overflow: hidden;
 }
diff --git a/src/plugins/svg-icon.ts b/src/plugins/svg-icon.ts
deleted file mode 100644
index 94197b7d5..000000000
--- a/src/plugins/svg-icon.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { App } from 'vue';
-import { SvgIcon } from '@/components';
-
-/** 注册全局svg-icon组件 */
-export default function setupNaiveUI(app: App) {
-  app.component('SvgIcon', SvgIcon);
-}
diff --git a/src/views/plugin/icon/index.vue b/src/views/plugin/icon/index.vue
index c85e2ebf3..e4b33e784 100644
--- a/src/views/plugin/icon/index.vue
+++ b/src/views/plugin/icon/index.vue
@@ -20,7 +20,7 @@
       <div class="grid grid-cols-10">
         <template v-for="item in svgIcons" :key="item">
           <div class="mt-5px flex-x-center">
-            <svg-icon :name="item" />
+            <svg-icon :name="item" class="text-30px" />
           </div>
         </template>
       </div>