vue3中使用插件vite-plugin-svg-icons

安装

我们可以使用以下命令来安装 vite-plugin-svg-icons 插件：

npm install vite-plugin-svg-icons --save-dev

配置

1、在安装了 vite-plugin-svg-icons 插件后，我们可以在 vite.config.js 中进行配置。以下是一个示例配置：

import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    svgIcons({
      // 指定 SVG图标 保存的文件夹路径
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定 使用svg图标的格式
      symbolId: 'icon-[dir]-[name]',
      // 指定要生成的组件名称
      // svgsDir: 'src/svgs',
    }),
  ],
})

2、在安装了 vite-plugin-svg-icons 插件后，我们可以在 vite.config.js 中进行配置。以下是一个示例配置：

vite-plugin-svg-icons 插件的版本是 v2.0.1

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

export default defineConfig({
  plugins: [
      createSvgIconsPlugin({
        // 指定 SVG图标 保存的文件夹路径
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定 使用svg图标的格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * custom insert position
         * @default: body-last
         */
         inject?: 'body-last' | 'body-first'

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

  ],
})

3、在项目的src/assets目录下新建一个目录 icons，保存所有的svg图标文件

4、接下来我们需要在main.ts中引入

import 'virtual:svg-icons-register'

基本使用

<svg style="width: 30px; height: 30px">
    <!-- xlink:href 是使用哪个svg的图标 fill是更改图标的颜色 -->
    <use xlink:href="#icon-logout" fill="blue"></use>
    <!-- <path xlink:href="#icon-user" fill="red"></path> -->
  </svg>

变成全局组件来使用

1、在src/components目录下新建一个svgIcon目录，目录内新建一个index.vue文件，内容如下：

<template>
  <svg :style="{ width, height }">
    <!-- xlink:href 是使用哪个svg的图标 fill是更改图标的颜色 -->

    <use :xlink:href="prefix + name" :fill="color"></use>

  </svg>
</template>
<script setup lang="ts">
import { defineProps } from 'Vue'

defineProps({
  // xlink:href的属性值前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  // 需要使用的svg的图标的名字
  name: {
    type: String,
    required: true,
  },
  // 需要使用的svg的图标的颜色
  color: {
    type: String,
    default: '#333',
  },
  // 需要使用的svg的图标的宽度
  width: {
    type: String,
    default: '16px',
  },
  // 需要使用的svg的图标的高度
  height: {
    type: String,
    default: '16px',
  },
})
</script>
<style scoped></style>

2、在components目录下新建一个index.ts 文件

// 引入项目中的全部全局组件
import SvgIcon from './svgIcon/index.vue'

// 组装成一个对象
const allGlobalComponents: any = { SvgIcon }

// 对外暴露插件对象，在main.ts中引入后，直接自动调用install方法
export default {
  install(app: any) {
    // 循环注册所有的全局组件
    Object.keys(allGlobalComponents).forEach((componentName) => {
      app.component(componentName, allGlobalComponents[componentName])
    })
  },
}

3、在main.ts文件中去使用，即可把组件进行全局注册

// 引入自定义插件对象，注册整个项目中的全局组件
import globalComponent from '@/components/index.ts'

app.use(globalComponent)

页面中使用：

<SvgIcon name="logout" color="pink" width="100px" height="100px"></SvgIcon>

如果遇到设置了颜色不生效，或者部分生效的问题，可以使用编辑器打开svg文件：

处理办法：把svg文件中的 fill 属性，删除即可（svg文件中的 fill 属性是无法修改的）

报错

报错：Cannot find package ‘fast-glob‘，安装下对应依赖就可以了

npm install fast-glob -D