Vue（Vite+PrimeVue）自定义SVG图标配置求助

方案1：通过Vite插件将SVG转为Vue组件 #

这是最便捷的实现方式，直接把SVG文件当作Vue组件导入使用：

1. 安装依赖插件

npm install vite-plugin-vue-svg --save-dev

2. 修改vite.config.ts配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-plugin-vue-svg'

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      defaultImport: 'component' // 默认将SVG导入为组件
    })
  ]
})

3. 在业务组件中直接导入使用

<template>
  <div class="demo">
    <IconText />
  </div>
</template>

<script setup lang="ts">
import IconText from '@/icons/icon-text.svg'
</script>

方案2：导入SVG原始文本并通过v-html渲染 #

无需额外插件，通过Vite的?raw后缀获取SVG原始内容，再用v-html渲染：

<template>
  <div v-html="iconContent" class="icon-container"></div>
</template>

<script setup lang="ts">
// 加?raw后缀告诉Vite读取文件原始文本内容
import iconContent from '@/icons/icon-text.svg?raw'
</script>

<style scoped>
.icon-container svg {
  width: 24px; /* 按需设置尺寸 */
  height: 24px;
  fill: currentColor; /* 支持颜色继承，方便主题切换 */
}
</style>

注意：检查设计师提供的SVG文件开头是否包含xmlns="http://www.w3.org/2000/svg"属性，缺失的话手动加上，否则可能无法正常渲染。

方案3：优化统一图标管理组件 #

如果之前的统一管理方案失效，可调整为动态匹配组件的写法：

<!-- src/components/Icons.vue -->
<template>
  <component :is="targetIcon" v-bind="$attrs" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
// 导入时指定?component（如果未全局配置SVG插件）
import IconText from '@/icons/icon-text.svg?component'

const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

// 维护图标名称与组件的映射表
const iconMap = {
  text: IconText
  // 后续新增图标直接在这里添加
}

const targetIcon = computed(() => iconMap[props.name])
</script>

使用时：

<template>
  <Icons name="text" class="text-icon" />
</template>

<script setup lang="ts">
import Icons from '@/components/Icons.vue'
</script>

内容的提问来源于stack exchange，提问作者guyaloni