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 文件，内容如下：

  <template>
    <svg
      :class="svgClass"
      aria-hidden="true"
      :width="size"
      :height="size"
      :style="{'color': color}"
    >
      <use :xlink:href="iconName" />
    </svg>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  // 定义组件属性
  const props = defineProps({
    // 图标名称（对应 SVG 文件名称）
    name: {
      type: String,
      required: true
    },
    // 图标大小（默认 16px）
    size: {
      type: [String, Number],
      default: 16
    },
    // 图标颜色（默认继承父元素颜色）
    color: {
      type: String,
      default: 'inherit'
    },
    // 自定义类名
    className: {
      type: String,
      default: ''
    }
  })
  
  // 拼接 symbolId
  const iconName = computed(() => `#icon-${props.name}`)
  
  // 拼接类名
  const svgClass = computed(() => {
    return ['svg-icon', props.className].filter(Boolean).join(' ')
  })
  </script>
  
  <style scoped>
  .svg-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
  }
  </style>
  

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 组件中使用：

  <template>
    <div>
      <!-- 基础使用（仅指定名称） -->
      <SvgIcon name="user" />
  
      <!-- 自定义大小和颜色 -->
      <SvgIcon name="setting" size="24" color="#409eff" />
  
      <!-- 自定义类名 -->
      <SvgIcon name="home" className="icon-home" />
    </div>
  </template>
  

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