Vue Unicons自定义图标配置viewBox不生效，渲染为默认值如何解决

第一步：修正自定义图标配置写法 #

你当前的custom-icons.js中path字段传入了完整的<path>标签，vue-unicons 3.3.1版本仅要求传入path的d属性值，修改后代码如下：

// custom-icons.js
export const myTestIcon = {
    name: 'myTestIcon',
    style: 'line',
    viewBox: '0 0 680 680',
    path: 'M 635 497 l 1 -466 l -620 0 L 20 640 L 516 643 L 231 221z'
}

第二步：全局存储自定义图标配置 #

在注册图标时将所有自定义图标配置全局挂载，方便后续动态读取viewBox属性：

// app.js
import Vue from 'vue'
import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd';
import { myTestIcon } from './custom-icons';

// 统一存储所有自定义图标
export const customIcons = [myTestIcon]
Unicon.add(customIcons)
// 挂载到Vue原型，全局可访问
Vue.prototype.$customIcons = customIcons

Vue.use(Unicon)

第三步：封装动态图标组件 #

封装自定义组件自动匹配对应图标的viewBox，适配动态使用场景：

<!-- src/components/CustomUnicon.vue -->
<template>
  <unicon 
    :name="name"
    :viewBox="matchedViewBox"
  />
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    matchedViewBox() {
      // 将短横线命名转驼峰，匹配自定义图标名称
      const camelCaseName = this.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
      const targetIcon = this.$customIcons.find(icon => icon.name === camelCaseName)
      return targetIcon ? targetIcon.viewBox : '0 0 24 24'
    }
  }
}
</script>

第四步：业务代码调用 #

动态使用时直接调用封装好的组件即可，无需手动传入viewBox：

<!-- 固定图标场景 -->
<CustomUnicon name="my-test-icon" />
<!-- 动态图标场景，iconName为变量 -->
<CustomUnicon :name="iconName" />

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