fa icon chooser

素晴らしいフォントアイコンセレクター

Font Awesome Icon の検索および検出エクスペリエンスを提供する他のプロジェクトで使用するために、Stencil で構築された Web コンポーネント。

Font Awesome Icon Gallery と同じ Algolia 検索を利用しています。

たとえば、Font Awesome 公式 WordPress プラグインで使用されます。

このコンポーネントを使用するには、JavaScript と DOM で直接フロントエンド開発を行う必要があります。これは、Font Awesome をアプリやコンポーネントに統合する開発者を対象としています。

概要

アイコン セレクターは、Font Awesome キットの固有のトークンを使用して、またはキットを使用せずに Font Awesome バージョン番号だけを指定して、Font Awesome キットと連携して動作するように構成できます。

非キットモードでは、Font Awesome Free のみが使用可能です。

キットと一緒に使用すると、そのキットの構成に従ってすべてが利用可能になります。

• フォントオーサムプロ

• 素晴らしいフォント 6

• キット アイコンのアップロード: キットにアップロードされたアイコンは、セレクターで使用できます。

ユーザーは、fontawesome.com のキットの設定ページで独自のキットを構成し、GraphQL API を介してキットの設定へのアクセスを承認する API トークンを生成します。

ユーザーは、そのキット トークンと API トークンをコードに提供します。コードは、キット トークンをfa-icon-chooserへの小道具として提供します。コードでは API トークンを使用してトークン エンドポイントからアクセス トークンを取得し、得られたアクセス トークンを使用してhandleQuery()コールバック関数内のクエリを承認します。

クエリとユーザーによるアイコン セレクターとの対話の結果を処理するために、いくつかの異なるコールバック関数の独自の実装を提供します。

インタラクションの例

1. ユーザーは、「アイコンの挿入」ボタンをクリックするなど、アプリ内で Font Awesome Icon を挿入する何らかのアクションを実行します。
2. コードは、さまざまな必要な props を提供するこのアイコン セレクターをマウントし、DOM で発生するfinishイベントをリッスンします。
3. コードでは、そのイベントによって配信されるIconChooserResultオブジェクトを使用して、ユーザーの選択の結果を表示します。

たとえば、 IconChooserResult次のようになります。

 { prefix : "fad" , iconName : "alien" }

コードがFontAwesomeIconコンポーネントを使用する React アプリの場合は、これをビルドするとよいでしょう。

 < FontAwesomeIcon icon = { [ prefix , iconName ] } / >

コードが JavaScript で書かれており、HTML 要素を文字列として構築する必要がある場合は、次のようになります。

 const icon = `<i class=" ${ prefix } ${ iconName } "></i>`

コードが WordPress プラグインまたはテーマの場合、次のようなショートコードが生成される可能性があります。

 const icon = `[icon prefix=" ${ prefix } " name=" ${ iconName } "]` 

設定

次のいずれかを選択します。

1. fa-icon-chooser Web コンポーネントを直接使用します。そのコンポーネントのパッケージでセットアップ手順を見つけてください。
2. JavaScript フレームワーク統合を使用します。現在、利用できるのは React 用のみです。

貢献者

Font Awesome チーム:

	名前	GitHub
	マイク・ウィルカーソン	@mlwilkerson
	フランシス・ボッツフォード	@frrrances
	ケルシー・ジャクソン	@keseythejackson