Vue3 - Vite 配置SVG

最新推荐文章于 2025-04-26 09:05:25 发布

℡古壹

最新推荐文章于 2025-04-26 09:05:25 发布

阅读量696

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_65251013/article/details/136920671

vue3 + vite 使用 svg

1.安装插件

npm install vite-plugin-svg-icons -D

npm install fast-glob -D

# yarn
yarn add vite-plugin-svg-icons -D
# pnpm
pnpm install vite-plugin-svg-icons -D

2、配置插件 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// 配置路径
const pathResolve = (pathStr) => {
  return path.resolve(__dirname, pathStr)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
      // iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
      // 或
      iconDirs: [pathResolve('./src/assets')],
      // 指定symbolId格式（这里的配置与6.2步骤中的引入svg组件的name配置项写法有关&#x