如何在vue中使用svg图标

具体地址:vbenjs/vite-plugin-svg-icons - Vite 中文文档 (viterc.cn)

vite-plugin-svg-icons

• 预加载 在项目运行时就生成所有图标,只需操作一次 dom
• 高性能 内置缓存,仅当文件被修改时才会重新生成

1.安装

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2.配置vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

3.在 src/main.ts 中引入注册脚本

//svg插件需要配置代码
import 'virtual:svg-icons-register'

4.从iconfont找svg代码并测试

  <!-- svg:图标外层容器节点,内部需要和use标签结合使用 -->
      <svg>
        <!-- xlink: href执行用哪一个图标,属性值 #icon-图标名字  fill可以更改颜色 -->
        <use xlink:href="#icon-love"  fill="red"></use>
      </svg>

  注意：如果想使用 fill更改颜色---（往往svg代码中自带fill会导致代码失效）

解决方法

   1.删除SVG代码中的fill元素

   2.配置如下信息

 createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
      svgoOptions:{
        plugins:[
          {
            name:"removeAttrs",
            params:{
              attrs:"fill"
            }
          }
        ]
      }
    }),

5.进行封装并注册为全局组件

<template>
  <!-- svg:图标外层容器节点,内部需要和use标签结合使用 -->
  <svg :style="{width,height}">
    <!-- xlink: href执行用哪一个图标,属性值 #icon-图标名字 -->
    <use :xlink:href="prefix+name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href 属性值前缀
  prefix:{
    type:String,
    default:'#icon-'
  },
  //图标名字
  name:{
    type:String,
    required:true
  },
  //颜色
  color:{
    type:String
  },
  width:{
    type:String,
    default:'30px'
  },
  height:{
    type:String,
    default:'30px'
  }
})
</script>

<style scoped></style>