526互联

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

发布时间 2023-10-15 21:14:37作者: 隔岸苦晴

安装插件

这里使用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>