FontAwesome with Vuetify - 如何在 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 Awesome all.css 文件（ <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> ） - 而不是按图标需要导入图标。 （缩小后的 all.css 文件的总重量在 v.5.2.0 中为 52kb。

原文由 user10261970 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的，所以使用上面评论者的建议，我已经设法通过使用标准 vue-font-awesome 方法让它工作，包括字体真棒图标组件，swopping <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>

原文由 user10261970 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以使用 tree shaking 。

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

请注意：

在本教程中，我假设读者拥有 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. ( \*\* ) 只有免费图标才需要，如果您拥有专业版 _并按照 此处 的说明进行操作_，它们已经包含在专业版中。
3. ( \*\*\* ) 在撰写本文时，双色调图标尚未完全集成，请注意错误。

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

我在这里假设您将 vuejs 与 javascript （不是打字稿） 一起使用，并且您已经通过 vue add vuetify 安装了 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> （汉堡菜单） 之类的东西。我们可以自定义这些，并将我们自己的添加到组合中（如果我们愿意）。我通过定义一个常量并在其中添加我需要的所有图标来做到这一点，如下所示：

 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 与 library 作为概念一起使用？
• Vuetify：如何安装 Font Awesome 5
• 在 VueJS 中使用 Font Awesome

原文由 Ole Aldric 发布，翻译遵循 CC BY-SA 4.0 许可协议