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文件。

以阿里矢量图为例，复制SVG代码，粘贴到新创建的svg文件内

main.ts入口文件导入

//svg插件需要配置代码

import 'virtual:svg-icons-register'

 最后使用

注意：如果fill属性没有作用，将刚刚复制的SVG代码中的fill属性删掉即可。

    <!-- 测试SVG图标使用 -->
    <!-- svg:图标外层容器节点，内部需要与use标签结合使用 -->
    <svg>
      <!-- xlink：href执行哪个图标，属性值务必#icon-图标名字 -->
      <!-- use标签fill属性可以设置图标的颜色，如果没有改变，需要将刚刚负责的svg代码中的fill删掉 -->
      <use xlink:href="#icon-cy" fill="pink"></use>
    </svg>

 效果：