vue.js - 如何从 fontawesome 只导入一个图标?
问题描述
我正在从 vuetify 搜索我的扩展面板的键盘向下箭头图标
我已经安装
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.5.0",
}
fontawesome-free,但我认为它安装了所有图标和字体
那么有没有办法只导入一个图标(键盘向下箭头)?
我已经搜索了我的节点模块,但我找不到它。
这是我的代码。
import Vuetify from 'vuetify'
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify, {
iconfont: 'fa'
})
解决方案
安装依赖项:
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 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
推荐阅读
- html - Angular 6 Datatable在外部过滤后刷新表中的数据
- xamarin.forms - Xamarin Formns:在列表视图中的数据之后创建多个空行
- angular - 查看源页面不使用角度通用 ssr 更新
- excel - 公式通过从输入框中选择返回循环内的#NAME
- python-3.x - 在python3中的字典内编辑列表中的字符串
- javascript - 未捕获的 ReferenceError:$ 未在 Power BI Embedded 中定义
- html - Jquery Chosen 隐藏空的 optgroup
- node.js - 用户帐户的数据库设计
- godot - Godot 文本编辑节点不换行
- java - 我的应用程序无法访问互联网 - 为什么会这样?