vue3项目中引入svg矢量图

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在 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/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

main.ts入口文件导入

import 'virtual:svg-icons-register'

使用svg 

在src/assets/icons文件夹下引入svg矢量图

在src/components目录下创建一个SvgIcon组件:代表如下

应为字体图标在很多地方用得到，所以封装成全局组件，在src文件夹下创建plugin/index.ts

//引入项目中的全局组件

import SvgIcon from '@/components/svgIcon.vue'


//全局对象
const allGlobalComponents = { SvgIcon }

//对外暴露插件对象
export default {
  install(app) {
    //注册项目的全部组件
    Object.keys(allGlobalComponents).forEach((key) => {
      //注册为全局组件
      app.component(key, allGlobalComponents[key])
    })
  },
}

 在入口文件main.ts引入src/index.ts文件,通过app.use方法安装自定义插件

import GlobalComponents from '@/plugin'
app.use(GlobalComponents)

在页面直接使用