vite vue3使用＜icon-svg＞来使用svg图标

安装vite-plugin-svg-icons

node version: >=12.0.0

vite version: >=2.0.0

npm i vite-plugin-svg-icons -D

配置

• vite.config.ts 中的配置插件

  import { defineConfig } from ‘vite’
  import vue from ‘@vitejs/plugin-vue’
  import { resolve } from ‘path’
  import viteSvgIcons from ‘vite-plugin-svg-icons’;

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

创建icon-svg组件

• /src/components/icon-svg/index.vue

引入

• 在 src/main.js 内引入

// 引入vite-plugin-svg-icons
import 'virtual:svg-icons-register';
// icon-svg组件
import iconSvg from '@/components/icon-svg/index.vue'
// 创建全局组件
createApp(App).component('iconSvg', iconSvg)

使用

1. 下载SVG文件
2. 将SVG文件复制到src/icons/svg文件夹中
3. 重命名SVG文件格式为 icon- *
4. 组件模版中使用 []

参数

说明

类型

默认值

name

图标类名

string

—

color

图标颜色

string

#333