vue3.0和vite显示svg图标

1、安装依赖（Vite 环境）

• 首先安装解析 SVG 的依赖：
• npm install vite-plugin-svg-icons -D
• yarn add vite-plugin-svg-icons -D
• pnpm add vite-plugin-svg-icons -D

2、配置 Vite 解析规则

• 在 vite.config.js 中添加 SVG 解析配置：

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

  export default defineConfig({
  plugins: [
  vue(),
  createSvgIconsPlugin({
  // 指定 SVG 图标存放目录（建议在 src/assets 下新建 icons 文件夹）
  iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
  // 指定 symbolId 格式
  symbolId: 'icon-[dir]-[name]'
  })
  ],
  resolve: {
  // 配置路径别名，方便导入
  alias: {
  '@': path.resolve(__dirname, 'src')
  }
  }
  })

3、封装 SVG 组件

• 在 src/components 下新建 SvgIcon.vue 文件，内容如下：

4、全局注册 SVG 组件

• 在 src/main.js 中全局注册组件并引入 SVG 注册脚本：

  import { createApp } from 'vue'
  import App from './App.vue'
  // 引入 SVG 注册脚本
  import 'virtual:svg-icons-register'
  // 引入封装的 SVG 组件
  import SvgIcon from './components/SvgIcon.vue'

  const app = createApp(App)

  // 全局注册 SVG 组件
  app.component('SvgIcon', SvgIcon)

  app.mount('#app')

5、使用 SVG 组件

• 1、先将 SVG 图标文件（如 user.svg、setting.svg）放入 src/assets/icons 目录。

• 3、在任意 Vue 组件中使用：

• 核心配置：通过 vite-plugin-svg-icons 解析 SVG 文件，生成可复用的 symbol 节点。
• 组件封装：封装的 SvgIcon 组件支持 name（必传）、size、color、className 等属性，满足个性化需求
• 使用方式：全局注册后，在任意组件中通过 <SvgIcon name="图标名称" /> 即可快速使用，无需重复引入 SVG 文件。