web-dev-qa-db-ja.com

FontAwesome with Vuetify-v-iconコンポーネント内にFont Awesomeアイコンを含める方法

うまくいけば、誰かが私がここでどこを間違えたかを知っているでしょう-VuetifyでFont Awesomeパッケージを実装しようとしています。 Font Awesomeはすべてインポートされ、すぐに使用できます（セットアップはFont Awesomeが正常に統合されているプロジェクトと同じです）。

私の裸の基本_main.js_ファイル：

_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をVuetifyのv-iconコンポーネント内にどのように統合するのですか？

参考のために、ここで概説されているものを使用しています。

https://vuetifyjs.com/en/components/icons

上記で指定したものと同じですが、悲しいことに私のアイコンが表示されません...

Update：かなり重いFont Awesome _all.css_ファイル（_<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">_）-代わりに、アイコンごとにアイコンをインポートする必要があります。 （縮小されたall.cssファイルの全体の重みは、_v.5.2.0_で52kbです。

vue.jsfont-awesomevuetify.js
10
user10261970

さて、上記のコメンターの提案を使用して、標準の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>
3
user10261970

Nuxt/Vuetifyプロジェクトの場合：

上記の答えを補完するために、プロジェクトのインストール中に作成されるVuetify構成ファイルでセットアップすることもできます（ "plugins/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>
12
Guilherme Pereira

シンプルなソリューションがVuetifyのフレームワークオプションの下に投稿されています。 https://vuetifyjs.com/en/framework/icons

NPMまたはyarnを使用してアイコンをインストールします。npminstall @ 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'
})

構成-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>
4
Saud Ali

src/main.jsにfont-awesomeをインポートします。

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')

次に、src/plugins/vuetify.jsでiconfontを定義します

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

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

tree shake を使用できます。

すべてのアイコンをvue/vuetifyにロードしないようにするオプションを探しているので、ツリーシェーキングメソッドを利用して、使用する各アイコンを手動で追加することをお勧めします。これは少し面倒ですが、オンデマンドでアイコンを追加することは長期的には有益です。webpackは指定したものをまとめるだけです。

注意してください：

このチュートリアルでは、読者がProパッケージを持っていると仮定します。無料のものだけを使用したい場合は、ミックスからプロに似たものをすべて削除してください

以下に、vuetifyでこれを実行し、v-iconおよびv-text/v-htmlでSVGを使用する私の好みの方法を示します。

最初にアイコンをインストールする必要があります：

（ターミナル/コマンドを開き、プロジェクト内でプロンプトを表示してインストールします）

$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
  1. （*）vue統合バンドル 詳細
  2. （**）無料アイコンにのみ必要です。Proを所有している場合、それらはすでにproに含まれています。
  3. （***）執筆時点では、ダブルトーンアイコンはまだ完全には統合されていません。エラーに注意してください。

次に、これをvuetify構成に追加します：

ここでは、javascript（TypeScriptではない）でvuejsを使用し、vue add vuetifyを介してvuetifyをインストールしたと仮定します。 vuetify.jsファイルは、pluginsフォルダーのsrcフォルダー内にある必要があります。 あなたの走行距離は異なる場合があります 。

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...

Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg', // The bees knees, what most people are looking for.
  },
});

さて、FontAwesome 5のメインコンポーネントを追加したので、treeshakingを使用して、プロジェクトに使用するアイコンを指示しましょう。 fa-plusとfa-user-circleの2つのアイコンのみを例として使用し、インストールしたFont Awesome Pro 5パッケージの3つに追加します（Light、Regular、Duotone ）そして、ソリッドに他のいくつか（バーとユーザー）を追加して、両方の方法で同時にこれを行う方法を確認します。

vuetify.jsファイルに戻り、置き換えます

// ... there should be more here, but see next part below ...

以下で（キャメルケースに注意）：

// src/plugins/vuetify.js
// ...
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
// ...

クイックノート：これらのライブラリ全体を追加したい場合は、import { far } from '@fortawesome/pro-regular-svg-icons'（for regular）などのようにインポートすることでそれを行うことができます。

ご覧のとおり、プロジェクトにfa-plusおよびfa-user-circleを追加しました。ここから、vuetify.js configにインポートしたlibraryにそれらを追加する必要があります。 （汗をかかないでください、ファイル全体は以下のコードスニペットで見ることができます。）：

// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
/// ...

ライブラリに追加したので、それらをvuetifyに引き渡す必要があります。 Vuetifyには、<v-app-bar-nav-icon></v-app-bar-nav-icon>（ハンバーガーメニュー）のようなものに使用するいくつかのspecialアイコンがあります。これらをカスタマイズし、自分でミックスに追加できます（必要な場合）。これを行うには、定数を定義し、そこに必要なすべてのアイコンを次のように追加します。

const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

そして、次のようにこの定数を設定に追加します。

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  },
});

values変数に直接追加することもできますが、定数を使用して行う方が読みやすいと思います。

これで、テンプレート、アペンドまたはプリペンドでこれらを使用できます。

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

最後に、完全な例を示します。

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  },
});
<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

参考文献：

0
Elmo