SVG图标配置-526互联

使用svg之后，网页加载的不再为图片资源，页面性能得到提升
svg文件比img小，在项目中几乎不占用资源

（vue3 + vite + ts）

1. 安装SVG依赖

pnpm install vite-plugin-svg-icons -D

2. 在vite.config.ts中配置插件

import path from "path";
// 引入svg需要用到插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      // Specify symbolId format
      symbolId: "icon-[dir]-[name]"
    })
  ],
});

3. main.ts入口文件引入

// svg插件配置代码
import "virtual:svg-icons-register";

保存启动后，可能出现的错误：cannot find package 'fast-glob'

执行以下，可以解决问题

pnpm install fast-glob -D

4. 选择svg图标

可在阿里巴巴矢量图标库中选择一个图标，然后复制该图标的svg代码到文件中，文件路径要与前面的iconDirs定义的内容对应
如下：

5. 使用图标

<!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
    <svg style="width: 30px; height: 30px">
      <!-- xlink:href表示执行用哪一个图标，属性值要为#icon-图标名字 -->
      <!-- use标签fill属性可以设置图标的颜色 -->
      <use xlink:href="#icon-slogan" fill="green"></use>
    </svg>

6. 效果