Vuetify中自定义图标与MDI图标共存问题求助

以下是几种高效的解决方案，避免使用MutationObserver这类hack手段：

1. 前缀区分法（通用方案） #

给MDI和自定义图标分别设置专属前缀，让组件根据前缀生成对应Class：

• MDI图标保持原有声明：icon="mdi-plus-circle"
• 自定义图标添加专属前缀（比如custom-）：icon="custom-user"

然后在图标组件中添加逻辑判断，生成正确的Class列表：

// 处理图标Class的示例函数
function getIconClasses(iconName) {
  const classes = [];
  if (iconName.startsWith('mdi-')) {
    // MDI图标：添加mdi基础类和对应图标类
    classes.push('mdi', iconName);
  } else if (iconName.startsWith('custom-')) {
    // 自定义图标：添加自定义字体类和对应图标别名
    classes.push('custom-icon-font', iconName);
  }
  return classes;
}

这样MDI图标会生成class="mdi mdi-plus-circle"，自定义图标生成class="custom-icon-font custom-user"，两类图标互不干扰。

2. 命名空间前缀法（框架适配） #

如果使用Vuetify这类自带图标系统的框架，可以直接注册多图标集，用命名空间前缀区分：

// Vuetify示例：注册多图标集
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
// 自定义图标集（需提前定义别名与对应图标编码）
const customIcons = {
  aliases: {
    user: 'custom-user',
  },
  values: {
    'custom-user': '', // 替换为你的自定义图标Unicode
  },
};

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi', // 默认使用MDI
    aliases,
    sets: {
      mdi,
      custom: customIcons, // 注册自定义图标集
    },
  },
});

使用时通过前缀指定图标集：

<!-- MDI图标 -->
<v-icon>mdi:plus-circle</v-icon>
<!-- 自定义图标 -->
<v-icon>custom:user</v-icon>

框架会自动为不同前缀的图标添加对应字体Class，无需手动处理。

3. 自定义图标组件封装 #

如果项目未使用框架，直接封装一个通用图标组件，统一处理两种图标类型：

<!-- HTML/JS组件示例 -->
<template id="icon-template">
  <i :class="iconClasses"></i>
</template>

<script>
class IconComponent extends HTMLElement {
  connectedCallback() {
    const iconName = this.getAttribute('icon');
    const classes = [];
    if (iconName.startsWith('mdi-')) {
      classes.push('mdi', iconName);
    } else {
      classes.push('custom-icon-font', iconName);
    }
    this.className = classes.join(' ');
    this.textContent = this.getIconContent(iconName); // 字体图标需返回对应Unicode
  }

  getIconContent(iconName) {
    // 自定义图标映射表
    const customMap = {
      '$alias': '&#xe601;'
    };
    return customMap[iconName] || ''; // MDI图标由字体自动渲染
  }
}

customElements.define('app-icon', IconComponent);
</script>

使用时：

<app-icon icon="mdi-plus-circle"></app-icon>
<app-icon icon="$alias"></app-icon>

问题根源 #

你之前的操作问题在于没有给组件明确的区分规则，导致它默认给所有图标添加了MDI的Class。最优方案是通过前缀或命名空间让组件识别不同图标类型，生成对应Class，而非用MutationObserver修改DOM或修改默认字体。

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