SVG图标配置

在开发项目的时候我们经常会用到svg矢量图，而且我们使用SVG以后，页面上加载的不再是图片资源。这对页面性能来说也是个很大的提升。

项目背景：vue3+vite+ts

安装依赖

npm install vite-plugin-svg-icons -D

 在vite.config.ts中配置插件

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

import path from 'path'

//mock插件提供方法

import { viteMockServe } from 'vite-plugin-mock'

export default () => {

  return {

    plugins: [

    createSvgIconsPlugin({

      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],

      symbolId: 'icon-[dir]-[name]'

    }),

    ],

  }

}

 在src/assets目录下，创建icons文件夹。icons文件夹下创建对应的svg文件。