用 Font Awesome SVG 图标覆盖单个 Vuetify 图标

Question

是否可以使用 Font Awesome svg 图标覆盖来自 Vuetify 的个别图标，而无需为每个图标编写自定义组件？

像这样：???

import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope'
import { svgPathData as questionCircleSvg } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'


Vue.use(Vuetify)

const app = new Vue({
vuetify: new Vuetify({
    icons: {
        iconfont: 'md',
        values: {
            email: envelopeSvg,
            question_circle: questionCircleSvg
        }
    },
...
})

更新我有点让上面的代码工作，但现在我当前的问题是 v-icon 组件使用错误的视图框大小呈现。

<font-awesome-icon class="icon" icon="envelope" /> //viewBox="0 0 512 512"
<v-icon class="icon">email</v-icon> //viewBox="0 0 24 24"

Answer 1

你需要添加正确的方法

https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-5-icons

yarn add @fortawesome/fontawesome-free -D


import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
  },
})

更新：根据 Git Issue

您需要安装所有您需要的字体或添加到 CDN 的链接，iconfont 仅指定哪个图标集将用于默认 Vueitfy 图标（例如 v-select 中的箭头等）

<v-icon>mdi-user</v-icon> // MDI will be used
<v-icon>user<v-icon> // Material Icons will be used
<v-icon>fas fa-whatever<v-icon> // FA will be used

用 Font Awesome SVG 图标覆盖单个 Vuetify 图标

Override individual Vuetify icon with Font Awesome SVG icon

vue.js

svg

vuetify.js

font-awesome