FontAwesome с Vuetify - как включить значки Font Awesome в компонент v-icon

Question

Надеюсь, кто-то узнает, где я здесь ошибся - я пытаюсь реализовать пакет Font Awesome с Vuetify.Font Awesome полностью импортирован и готов к работе (настройка идентична проектам, в которые я успешно интегрировал Font Awesome):

Мои базовые сведения * Файл 1003 *:

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 в компонент v-icon Vuetify?

Для справки, я использую то, что изложено здесь:

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 составляет 52 КБ в v.5.2.0.

Answer 1

импорт font-awesome в src / main.js:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

, а затем определение iconfont в src / plugins / vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
})

Answer 2

Простое решение размещено в разделе параметров фреймворка в Vuetify: https://vuetifyjs.com/en/framework/icons

Установка значков с помощью NPM или пряжи: npm install @ fortawesome / fontawesome-free -D

Конфигурация - Дляпростой проект vue

Добавьте это в свой main.js

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

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

Config - для проекта nuxt + vuetify

Создайте файл js (например, icons.js) вплагины

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

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

Добавьте это к своим плагинам в nuxt.config.js

{ src: '~/plugins/icons.js', ssr:false }

Использование

Теперь вы можете получить доступ к удивительным значкам шрифтов, используя v-icon или append/ prepend в компоненте как:

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>

Answer 3

Для проекта Nuxt / Vuetify:

В дополнение к ответу, приведенному выше, вы также можете настроить его в файле конфигурации Vuetify, который создается во время установки проекта ( "плагины /vuetify.js "), добавив реквизит" iconfont ":

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

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

Теперь используйте с таким значком компонента:

<v-icon>fab fa-vuejs</v-icon>

Answer 4

Хорошо, поэтому, используя предложение вышеупомянутого комментатора, мне удалось заставить его работать, используя стандартный vue-font-awesome метод включения шрифтовых компонентов пиктограмм, выполняя <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>