Merge pull request #51 from Lsq128/main

feat(components): svgIcon,添加type,调整size方案

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({
+interface Props {
-  prefix: {
+  /** icon前缀 */
-    type: String,
+  prefix?: string;
-    default: 'icon'
+  /** icon 名称 */
-  },
+  name: string;
-  name: {
+  /** 填充颜色 */
-    type: String,
+  color?: string;
-    required: true
-  },
-  size: {
-    type: [String, Number],
-    default: 30
-  },
-  color: {
-    type: String,
-    default: ''
 }
-});
+const props = withDefaults(defineProps<Props>(), {
-const svgStyle = computed(() => {
+  prefix: 'icon',
-  const { size } = props;
+  name: '',
-  let s = `${size}`;
+  color: ''
-  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 {
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
   overflow: hidden;
 }

src/plugins/svg-icon.ts

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

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>