在Vite构建的项目中使用svg图标

合集 - Vite(3)

1.在Vite构建的项目中使用svg图标2023-10-15

2.在Vite项目中使用scss创建全局变量2023-10-153.vite中使用scss导出变量到js/ts中作为变量使用2023-10-25

收起

安装插件

这里使用yarn来安装vite-plugin-svg-icons插件

yarn add vite-plugin-svg-icons

文件配置

在vite.config.ts中进行文件配置，首先是引入插件，其次是在plugins中添加配置
iconDirs中存放的就是图标文件地址数组，这里的目录是 src/assets/icons

// 引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [vue(),
    createSvgIconsPlugin({  // 配置svg图标
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]'
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve("./src")
    }
  }
})

页面中使用

use标签中添加xlink:href属性，值为#icon-[图标文件名]，这里的值是与配置文件中的icon-[name]相匹配。

    <!-- 测试svg图标的使用 -->
    <!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
    <svg>
      <use xlink:href="#icon-label">
      </use>
    </svg>