Vuejs Vuetify2项目中如何配置Phosphor Icons为自定义图标组件

问题根源 #

Vuetify的<v-icon>组件默认仅支持Material Icons（mdi-前缀）这类字体图标，而Phosphor Icons（phosphor-vue）是Vue组件形式的图标，无法直接通过字符串名称在<v-icon>中渲染。此外你的代码中存在拼写错误：ph-archieve-tray应为ph-archive-tray，先修正这个避免额外问题。

解决方案：全局注册Phosphor组件+动态渲染 #

1. 全局注册所有Phosphor图标组件

在项目入口文件（如main.js）中添加以下代码，将所有Phosphor图标组件注册为全局可用的kebab-case格式组件：

import Vue from 'vue'
import * as PhosphorIcons from 'phosphor-vue'

// 将PascalCase组件名转换为kebab-case（如PhArchiveTray → ph-archive-tray）并全局注册
Object.entries(PhosphorIcons).forEach(([componentName, component]) => {
  const kebabName = componentName
    .replace(/^Ph/, '')
    .replace(/([A-Z])/g, '-$1')
    .toLowerCase()
    .replace(/^-/, 'ph-')
  
  Vue.component(kebabName, component)
})

2. 修改模板，区分字体图标与组件图标

将原来的图标渲染部分修改为：

<v-list-item-icon>
  <!-- 渲染Material Icons字体图标 -->
  <template v-if="item.icon.startsWith('mdi-')">
    <v-icon>{{ item.icon }}</v-icon>
  </template>
  <!-- 渲染Phosphor组件图标 -->
  <template v-else>
    <component :is="item.icon" size="24" color="currentColor" />
  </template>
</v-list-item-icon>

• size="24"和color="currentColor"是为了让Phosphor图标和Vuetify默认图标样式保持一致，可根据需求调整。

可选：按需注册图标组件 #

如果不想全局注册所有图标，可按需注册常用组件，比如仅注册ph-archive-tray：

import Vue from 'vue'
import { PhArchiveTray } from 'phosphor-vue'

Vue.component('ph-archive-tray', PhArchiveTray)

模板部分和上述方案一致即可。

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