在 vue 3 CLI 中使用 Font Awesome 图标和 Material UI 图标

Question

大家好，我只是想知道我们是否可以并排使用 2 种图标字体，

我可能想使用 Material Design Icon 和 Font Awesome Icon。

主js文件，

显然下面的代码不起作用，您需要选择一个不能同时使用。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)

import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files

import { fa } from 'vuetify/iconsets/fa'

// Vuetify
import 'vuetify/styles';
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";


const vuetify = createVuetify({
  components,
  directives,
  icons:{
    defaultSet: 'mdi',
    defaultSet: 'fa',
    aliases,
    sets:{
      mdi,
      fa
    },
  },
})

app.use(vuetify)
app.mount('#app');

知道如何让这些图标同时工作吗？

谢谢

Answer 1

您需要配置 Vue 和 Vuetify 设置才能识别这两个图标集。

在 Vuetify 配置中，您可以定义多个图标集并指定默认使用哪一个。但是，代码中的问题是您尝试设置 defaultSet 两次，这是不允许的。相反，在集合下定义 mdi 和 fa，并在您想要使用特定集合时通过在图标名称前加上集合标识符作为前缀，在组件中使用它们。这样，两个图标集就可以共存并在整个应用程序中使用。

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi', // Choose a default set, 'mdi' or 'fa'
    aliases,
    sets: {
      mdi,
      fa,
    },
  },
});

当您在应用程序中使用图标时，如果您使用的是非默认集合中的图标，请在其前面加上集合标识符（mdi: 或 fa:）。

干杯！