vue3 + vite 使用svg-icon

vue3 + vite 使用svg-icon

前言：
在vue3 + vite 脚手架中做项目开发遇到大量矢量图自定义设置时以往做法都是使用iconfont 作为css fontFace 引入项目中。 当遇到所需矢量图不确定 总会重复性的重新导入iconfont css，对开发者来说是很枯燥的操作。然而使用自定义svg-icon 组件使用可以完美解决这种烦恼,可以快速引入自己需要的svg 并可以按照ui设计稿处理大小、颜色。

一、 使用方式

• 1. 创建一个svg 存放文件夹并创建svg-icon组件

     例如:

     |-- src
         |--icons
            |-- svg
         |--SvgIcon.vue
     

     svg 文件下是存放的矢量图.svg, 注意文件名就是后续调用的名称应为英文

• 2. 创建svgIcon vue 组件

     // SvgIcon.vue
     
     <template>
         <svg :class="svgClass" v-bind="$attrs" :style="{ color: color, fontSize: size+'px'}">
             <use :href="iconName"></use>
         </svg>
     </template>
     
     <script setup >
     import { computed } from "vue";
     const props = defineProps({
         name: {
             type: String,
             required: true,
         },
         color: {
             type: String,
             default: "",
         },
         size: {
             type: Number,
         },
     });
     const iconName = computed(() => `#icon-${props.name}`);
     const svgClass = computed(() => {
         if (props.name) return `svg-icon icon-${props.name}`;
         return "svg-icon";
     });
     </script>
     
     <style scoped>
     .svg-icon {
         width: 1em;
         height: 1em;
         fill: currentColor;
         vertical-align: middle;
     }
     </style>
     

• 3. 下载依赖 使用

  npm install --save vite-plugin-svg-icons -D
  
  // 在vite.config.js 中
  
  import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  import path from 'path'
  plugins:[
      createSvgIconsPlugin({
          iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')], // SVG 存放路径
          symbolId: 'icon-[name]'
      })
  ]
  

• 4. 在main.js 中引入

  // svg 精灵图
  import 'virtual:svg-icons-register'
  import SvgIcon from './icons/SvgIcon.vue'
  
  const app = createApp(App);
  app.component('svg-icon', SvgIcon) // 全局挂载组件
  
  

• 5. 在组件中使用

  <svg-icon name="arrow" color="red" size="14"></svg-icon>