如何从 fontawesome 只导入一个图标？答案

【问题标题】：How can I import only one icon from fontawesome?如何从 fontawesome 只导入一个图标？
【发布时间】：2018-11-14 11:07:17
【问题描述】：

我正在从 vuetify 搜索我的扩展面板的键盘向下箭头图标

我已经安装了

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.5.0",
}

fontawesome-free，但我认为它安装了所有图标和字体

那么有没有办法只导入一个图标（keyboard-arrow-down）？

我搜索了我的节点模块，但找不到。

这是我的代码。

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

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

【问题讨论】：

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

【解决方案1】：

安装依赖：

npm i --save @fortawesome/fontawesome-svg-core \
npm i --save @fortawesome/free-solid-svg-icons \
npm i --save @fortawesome/vue-fontawesome

导入单个图标：

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

library.add(faCoffee)

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

使用它：

<template>
  <div id="app">
    <font-awesome-icon icon="coffee" />
  </div>
</template>

Vue.js reference documentation

更新

使用 Vue CLI 3 供参考的捆绑包大小：

1. Single Icon

File                                 Size               Gzipped

dist/js/chunk-vendors.0ce8e3e3.js    135.62 KiB         46.03 KiB
dist/js/app.d98fb35c.js              2.30 KiB           1.13 KiB

2. All Icons

File                                 Size               Gzipped

dist/js/chunk-vendors.7833710c.js    767.94 KiB         249.05 KiB
dist/js/app.b7f38b90.js              2.36 KiB           1.17 KiB

【讨论】：

我可以在 Vuetify 中使用它吗？
你当然可以。