vue3使用vite-plugin-svg-icons加载SVG图片

小猿L

已于 2024-04-16 20:51:40 修改

阅读量877

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue踩坑经验累积文章标签： vue

于 2024-03-30 12:38:02 首次发布

本文链接：https://blog.csdn.net/enhenglhm/article/details/137170134

本文介绍了如何在Vite项目中使用vite-plugin-svg-icons插件来管理SVG图标，包括配置、全局引入SVG组件、添加TypeScript支持以及实际使用的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方参考

1-安装

npm i vite-plugin-svg-icons -D

2-配置

vite.config.js中编辑

import { fileURLToPath, URL } from 'node:url'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

// 在plugins增加 createSvgIconsPlugin插件
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [fileURLToPath(new URL('./src/assets/svgs', import.meta.url))],
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})