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

Posted 2023-02-22

【中文标题】FontAwesome with Vuetify - 如何在 v-icon 组件中包含 Font Awesome 图标

【英文标题】：FontAwesome with Vuetify - How to include Font Awesome icons within the v-icon component

【发布时间】：2019-02-01 11:13:46

【问题描述】：

希望有人会知道我在哪里出错了 - 我正在尝试使用 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 Awesome all.css 文件 (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">) - 而是在图标上导入按图标需要。 （v.5.2.0中缩小的all.css文件总重量为52kb。

【问题讨论】：

有什么理由不使用<font-awesome-icon> 组件？

嗨 Phil - 只是在图标上使用 Vuetify 指南/文档 - 说你可以按照我指定的方式使用它...这是我最初的想法，可能使用一个可以继承所有样式的插槽Vuetify 元素的...但如果 Vuetify 指定它可以这样做，这似乎是多余的。

看看example code，他们只是在他们的应用程序中包含了FontAwesome CSS。您上面的代码使用 FontAwesome + Vue 集成

我明白了 - 使用正常的 vue-fontawesome 集成效果很好（请参阅下面的答案）。谢谢您的帮助！ :)

Fontawesome 5 with VuetifyJs 1.0.0的可能重复

【参考方案1】：

你可以使用tree shaking。

由于您正在寻找避免将所有图标加载到 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 *** 

( * ) vue 集成包more info ( ** ) 仅免费图标需要，如果您拥有 Pro 并按照说明here，它们已经包含在 pro 中。 ( *** ) 在撰写本文时，双色调图标尚未完全集成，请注意错误。

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

我在这里假设您将 vuejs 与 javascript（不是 typescript） 一起使用，并且您已经通过 vue add vuetify 安装了 vuetify。 vuetify.js 文件应位于 src 文件夹中的 plugins 文件夹中。 Your milage may vary.

// 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 添加到我们的项目中。从这里开始，我们需要将它们添加到我们导入到vuetify.js 配置中的library。 （不要汗，整个文件可以在下面的代码sn-p中看到。）：

// 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> （汉堡菜单） 之类的东西。我们可以自定义这些，并将我们自己的添加到组合中（如果我们愿意）。我通过定义一个常量并在其中添加我需要的所有图标来做到这一点，如下所示：

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>

延伸阅读：

Why use Font Awesome with library as a concept? Vuetify: how to install Font Awesome 5 Using Font Awesome with VueJS

【讨论】：

你应该得到更多的支持。最干净的解决方案。也许是一个建议，我将 fontawesome 的逻辑放在一个名为 fontAwesome.js 的单独文件中，然后我将其导入 vuetify.js

这是一个很好的建议，而且比我的更干净。如果您愿意，可以更新此答案以反映您的建议。 :D

已更新。你也不需要Vue.component('font-awesome-icon', FontAwesomeIcon)

@Stevenwhy 你不需要再调用 Vue.component('font-awesome-icon'... 了吗？它仍然在 vue-fontawesome github 页面上根据他们的说明列出

很遗憾，您的解决方案完全错误。您正在从 SVG 图标进行所有导入，然后最后使用字体图标。您可以通过检查页面上的图标来验证这一点。

【参考方案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>

【讨论】：

现在可以找到更完整和更新的答案here。

【参考方案3】：

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

使用 NPM 或 yarn 安装图标库：

npm install @fortawesome/fontawesome-free -D

配置 - 对于一个简单的 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', s-s-r: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>

【参考方案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>

【讨论】：

有人知道如何为附加/前置图标道具执行此操作吗？

@AndrewHarvey 您可以使用插槽（例如

如何使用社交图标？它适用于 fa-code 但不适用于 fas facebook-f / facebook-f / fab facebook-f。

【参考方案5】：

在 src/main.js 中导入 font-awesome:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'

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

然后在 src/plugins/vuetify.js 中定义 iconfont

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, 
  iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
)