带有 Vuetify 的 FontAwesome SVG 图标 - 如何在 v-icon/prepend-icon 中使用？答案

【问题标题】：FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?带有 Vuetify 的 FontAwesome SVG 图标 - 如何在 v-icon/prepend-icon 中使用？
【发布时间】：2019-08-07 23:43:39
【问题描述】：

我是 Vue 新手，无法找到如何在 v-icon 和 prepend-icon 中使用 FA SVG 图标的确切答案。如果我使用：

<font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon>

图标已显示，但如何在 v-icon 和 prepend-icon 中使用 FA SVG 图标？示例：

            <v-autocomplete v-model="replUser"
            :items="users" 
            color="accent white--text" 
            label="User"
            prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked
            >

            </v-autocomplete>

我的 main.js：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// import colors from 'vuetify/es5/util/colors'
import './plugins/vuetify'
import App from './App.vue'
import i18n from './i18n'
import {
  library
} from '@fortawesome/fontawesome-svg-core'
import {
  FontAwesomeIcon
} from '@fortawesome/vue-fontawesome'
import {
  fas
} from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.

Vue.use(Vuetify, {
  iconfont: 'faSvg',
})
Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

我做错了什么？

【问题讨论】：

标签： vue.js font-awesome vuetify.js

【解决方案1】：

如果你想在v-icon/prepend-icon 中使用svg 图标，那么你需要通过$vuetify.icons 对象来访问它们。 v-icon/prepend-icon 中的任何其他文本都将被解释为 webfont/css 类。

但要使用$vuetify.icons 对象，您应该注册自定义图标。示例：

import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faVuejs } from "@fortawesome/free-brands-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.

Vue.use(Vuetify, {
  icons: {
    vue: {
      component: FontAwesomeIcon,
      props: {
        icon: ["fab", "vuejs"]
      }
    }
  }
});

现在你可以使用 vue-brand 图标了：

<v-icon>$vuetify.icons.vue</v-icon>
<v-text-field prepend-icon="$vuetify.icons.vue"/>

另外，您无需通过font-awesome-icon注册即可使用：

<font-awesome-icon :icon="['fab', 'vuejs']" />
<v-text-field>
    <font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>
</v-text-field>

开箱即用的 vuetify 预设了可与 SVG 关联的图标 config：

...
import { fas } from "@fortawesome/free-solid-svg-icons";
...
library.add(fas);
...
Vue.use(Vuetify, {
  iconfont: "faSvg"
});

但是要使用它，您应该再次调用 $vuetify.icons （vuetify 只需将预设包装为组件）：

<v-icon>$vuetify.icons.warning</v-icon>

完整示例codesandbox

【讨论】：

【解决方案2】：

来自Vuetifydocumention：

还支持 Font Awesome。只需使用 fa- 前缀的图标名称。请注意，您仍然需要将 Font Awesome 图标包含在你的项目。

也许对你有帮助。但是，如果没有您的示例代码，我无法确定

    <v-autocomplete v-model="replUser"
      :items="users" 
      color="accent white--text" 
      label="User"
      prepend-icon="fa-dekstop">
    </v-autocomplete>

【讨论】：

这个答案甚至不考虑 OP 要求 SVG 版本。