我正在从 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.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
关于vue.js - 如何从 fontawesome 只导入一个图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53298778/