在Nuxt 3中如何为Vuetify 3导入自定义IcoMoon Iconfont

针对你的需求，以下是具体配置步骤，实现通过<v-icon icon="custom-icon_icon1" />调用自定义图标：

1. 确认文件结构与路径 #

确保你的文件层级如下：

assets/
└── icons/
    ├── custom_local_icon.css
    └── fonts/
        ├── icomoon.eot
        ├── icomoon.ttf
        ├── icomoon.woff
        └── icomoon.svg

custom_local_icon.css中的字体路径无需修改，保持原有的url('fonts/xxx')即可。

2. 修改Vuetify配置文件 #

编辑plugins/vuetify.ts，导入自定义样式并注册IcoMoon图标集：

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { aliases, mdi } from "vuetify/iconsets/mdi";
import "@mdi/font/css/materialdesignicons.css";
// 导入自定义图标样式文件
import "~/assets/icons/custom_local_icon.css";

// 定义IcoMoon图标集
const icomoon = {
  component: (props: { icon: string }) => ({
    class: props.icon
  })
};

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi", // 可改为'icomoon'设为默认图标集
      aliases,
      sets: {
        mdi,
        icomoon // 注册自定义图标集
      }
    }
  });

  nuxtApp.vueApp.use(vuetify);
});

3. 调用自定义图标 #

方式一：指定图标集调用

如果默认图标集保留为mdi，使用时通过set属性指定icomoon：

<v-icon set="icomoon" icon="custom-icon_icon1" />

方式二：设为默认图标集调用

若将defaultSet改为icomoon，则直接使用即可：

<v-icon icon="custom-icon_icon1" />

可选：添加图标别名 #

若想简化图标名称，可扩展aliases：

const aliases = {
  ...aliases, // 保留原MDI图标别名
  icon1: "custom-icon_icon1" // 自定义别名
};

之后可通过别名调用：

<v-icon set="icomoon" icon="icon1" />

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