Vue 開発プロジェクトで Font Awesome 5 を使用する方法

Font Awesome 公式サイト: https://fontawesome.com/

フロントエンドの友人は皆、よく使われるアイコンが豊富にあるFont Awesomeアイコンライブラリを知っています。作者は開発時によく使用しており、あちこちでアイコンを探す手間が省けます。もちろん、Alibabaのアイコンフォントも良いですが、より乱雑で、見つかったアイコンが一致しないことがあり、サイズや比率に多少の偏差があります。特定のアイコンライブラリのアイコンだけを使用しても、不完全なコレクションになることは避けられません（これは作者の経験であり、アイコンフォントを軽視する意図はまったくありません。スプレーしないでください）。Font Awesomeは、数年の開発を通じてインターネット上で最もよく使用されるアイコンを収録しており、ほとんどの人の開発ニーズを確実に満たすことができます（アーティストがいるのに、なぜ自分でやらなければならないのですか？！！）。もちろん、タイトルからわかるように、Font Awesomeは5の時代に突入し、使用方法も4以前のバージョンとは異なり、有料版が追加されました。 。 。もちろん、無料版でも十分です!次に、独自の Vue 開発プロジェクトで Font Awesome 5 を使用する方法について説明します。

依存関係をインストールする

1. 基本的な依存関係をインストールする

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome

2. スタイルの依存関係をインストールする

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

知らせ：

• 無料版では、ソリッド、レギュラー、ブランドの 3 つのスタイルがサポートされています。後からアイコンを使用するときは、スタイルに応じて異なるプレフィックスが付きます。
• 依存関係のダウンロードが失敗した場合は、cnpm を試してください。詳細については説明しません。
  

構成

main.js ファイルを入力して Font Awesome を設定します。設定方法には、4 以前よりも多くのコードが含まれています。

'@fortawesome/fontawesome' から fontawesome をインポートします
'@fortawesome/vue-fontawesome' から FontAwesomeIcon をインポートします。
'@fortawesome/fontawesome-free-solid' から solid をインポートします。
'@fortawesome/fontawesome-free-regular' から通常のフォントをインポートします。
'@fortawesome/fontawesome-free-brands' からブランドをインポートします

fontawesome.library.add(ソリッド)
fontawesome.library.add(通常)
fontawesome.library.add(ブランド)

Vue.component('font-awesome-icon', FontAwesomeIcon)

使用

設定が完了したら、プロジェクトで Font Awesome を自由に使用できます。使用方法は次のとおりです。

たとえば、「ユーザー」アイコンを使用します。

1.アイコン検索ページに入る

検索アドレス: https://fontawesome.com/icons...

2. 使用したいアイコンの英語名を入力します。例：userはuserです。

3. 有料アイコンをフィルタリングする

検索結果の一部は灰色で表示され、有料版であることを示しています。左側のフィルター項目「無料」をクリックすると、有料版を除外できます。

4.アイコンをクリックして表示する

気に入ったアイコンを選択してクリックするとコンテンツが表示されます。

右側は選択するスタイルです。ここで、このアイコンが solid、regular、light (有料スタイル) をサポートしていることがわかります。次に、以下はおなじみの使用コードですが、Vue ではそのまま使用できません。次の記述に変更する必要があります。

<font-awesome-icon :icon="['fas','user]"/>

アイコンプロパティに配列を渡します。最初のパラメータはスタイル、2番目はアイコン名です。「fa-」の文字を書く手間が省けるようですが、構造が以前よりも複雑になっている気がします(⊙o⊙)...

5. 結果を表示する

さて、私たちの努力の成果を確認してみましょう。ブラウザを開いてアイコン効果を確認してください。導入は成功しました!

要約する

Font Awesome 5 は、以前のバージョンと比較してアイコンの最適化が完璧で、アイコン ライブラリの内容もはるかに豊富です。ただし、設定は以前よりも複雑で、時間がかかります。全体的に、素晴らしいアイコン ライブラリです。便利だと感じた場合は、ぜひ高評価を付けてください。

Vue 開発プロジェクトで Font Awesome 5 を使用する方法についての記事はこれで終わりです。Vue での Font Awesome 5 の使用についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。