Как я могу импортировать только один значок из Fontawesome? - PullRequest
0 голосов
/ 14 ноября 2018

Я ищу значок клавиатуры со стрелкой вниз для моей панели расширения из vuetify

Я установил

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

без шрифтов, но я думаю, что установлены все иконки и шрифты

Так есть ли способ импортировать только один значок (клавиатура-стрелка-вниз)?

Я искал свои нод-модули, но не смог его найти.

Вот мой код.

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

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

1 Ответ

0 голосов
/ 14 ноября 2018

Установить зависимости:

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

Обновление

Размеры пачек для справки с использованием 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
...