Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标

Question

希望有人会知道我在哪里出错了-我正在尝试使用Vuetify实现Font Awesome软件包。Font Awesome已全部导入并且可以使用（设置与我成功集成了Font Awesome的项目相同）：

我的基本main.js文件：

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import './registerServiceWorker'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCode } from '@fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCode)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

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

在组件中，我引用的图标如下：

我的Component.vue：

<template>
    ...
    <v-btn>
        <v-icon>fas fa-code</v-icon>
    </v-btn>
    ...
</template>

^我遗漏了多余的代码*。

因此，我的问题是-我们如何将Font Awesome集成到Vuetify的v-icon组件中？

作为参考，我使用的是这里概述的内容：

https://vuetifyjs.com/en/components/icons

这与我上面的规定相同，但可惜我的图标没有显示...

更新：我特别想要一种解决方案，该解决方案不包括添加相当繁重的Font Awesomeall.css文件（<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">）-而是按需要导入图标。（缩小的all.css文件的总重量为52kb，位于中v.5.2.0。

Answer 1

您可以使用摇树。

由于您正在寻找避免将所有图标加载到 vue/vuetify 中的选项，我建议您使用摇树方法并手动添加您想要使用的每个图标。这可能有点乏味，但从长远来看，按需添加图标将是有益的 - 因为 webpack 只会捆绑您指定的图标。

请注意：

在本教程中，我假设读者有 Pro 包。如果您只想使用免费的，只需从混音中删除任何类似于 pro 的东西

下面你可以看到我使用 vuetify 和使用带有 v-icon 和 v-text/v-html 的 SVG 的首选方式：

首先我们必须安装图标：

（在项目中打开终端/命令提示符并安装）

$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type *** 

1. ( * ) vue 集成包更多信息
2. ( ** )仅需要免费图标，如果您拥有 Pro并按照此处的说明进行操作，则它们已包含在 Pro 中。
3. ( *** )截至撰写时，双色调图标尚未完全集成，请注意错误。

然后让我们将其添加到我们的 vuetify 配置中：

我在这里假设您将 vuejs 与 javascript （不是打字稿）一起使用，并且您已经通过vue add vuetify. 该vuetify.js文件应位于plugins文件夹中的src文件夹内。您的里程可能会有所不同。

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...

Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg', // The bees knees, what most people are looking for.
  },
});

好的，现在我们已经添加了 FontAwesome 5 的主要组件，让我们使用 treeshaking 来指示我们希望在我们的项目中使用哪些图标。我将仅使用两个图标作为示例：fa-plus和fa-user-circle，我将为我们安装的三个 Font Awesome Pro 5 软件包（Light、Regular 和 Duotone）添加它们，然后我将为实体添加一些其他图标（条形和用户），看看这可以如何同时以两种方式完成。

所以回到我们的vuetify.js文件，我们替换

// ... there should be more here, but see next part below ...

与以下（注意驼峰）：

// src/plugins/vuetify.js
// ...
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
// ...

快速说明：如果您仍然想添加这些的整个库，您可以通过像这样导入：（import { far } from '@fortawesome/pro-regular-svg-icons' 对于常规）等等。

如您所见，我们现在已将 fa-plus 和 fa-user-circle 添加到我们的项目中。从这里开始，我们需要将它们添加到library我们导入的vuetify.js配置中。（不要着急，整个文件可以在下面的代码片段中看到。）：

// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
/// ...

现在我们已经将它们添加到库中，我们需要将它们交给 vuetify。Vuetify 有一些特殊的图标，它们用于<v-app-bar-nav-icon></v-app-bar-nav-icon> (hamburger menu) 之类的东西。我们可以自定义这些，并将我们自己的添加到组合中（如果我们愿意）。我通过定义一个常量并在其中添加我需要的所有图标来做到这一点，如下所示：

const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

然后我们将此常量添加到配置中，如下所示：

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  },
});

您也可以将它们直接添加到values变量中，但我发现通过常量来实现它更具可读性。

现在我们可以在模板、附加或前置中使用这些：

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

最后，这是完整的示例：

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  },
});

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

建议单独的文件以便更好地阅读

我们可以将 fontAwesome 逻辑分离到另一个文件中：

所以我们有2个文件：

• fontAwesome.js你在哪里做属于 fontAwesome 的所有逻辑
• 在vuetify.js您将导入从图标fontAwesome.js

// src/plugins/fontAwesome.js
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'

library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

export { CUSTOM_ICONS }

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS
  },
});

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

进一步阅读：

• 为什么将 Font Awesome 与库作为概念一起使用？
• Vuetify：如何安装 Font Awesome 5
• 在 VueJS 中使用 Font Awesome

Answer 2

对于Nuxt / Vuetify项目：

作为上述答案的补充，您还可以在项目安装过程中创建的Vuetify配置文件（“ plugins / vuetify.js”）中进行设置，并添加“ iconfont”属性：

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

Vue.use(Vuetify, {
 iconfont: 'fa'
})

现在，像这样使用图标组件：

<v-icon>fab fa-vuejs</v-icon>

Answer 3

一个简单的解决方案发布在Vuetify的框架选项下：https ://vuetifyjs.com/en/framework/icons

使用NPM或yarn安装图标：npm install @ fortawesome / fontawesome-free -D

Config-用于简单的vue项目

将此添加到您的main.js

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

配置-对于nuxt + vuetify项目

在插件下创建一个js文件（例如icons.js）

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa'
})

将此添加到nuxt.config.js中的插件

{ src: '~/plugins/icons.js', ssr:false }

用法

现在，您可以使用v-icon或在组件中添加/添加前缀来访问字体真棒图标：

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>

Answer 4

好的，所以使用上述评论者的建议，我设法通过使用包含vue-font-awesome很棒的字体图标组件的标准方法来使其工作<v-icon>，换成我在问题中使用的内容：

<v-btn>
   <v-icon>fas fa-code</v-icon>
</v-btn>

...变成：

<v-btn fab dark small color="black" v-on:click="addCodeBlock">
   <font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>