fa icon chooser

Font Awesome 圖示選擇器

使用 Stencil 建立的 Web 元件，用於想要提供 Font Awesome 圖示搜尋和發現體驗的其他項目。

它由與 Font Awesome 圖標庫相同的 Algolia 搜尋提供支援。

例如，用於 Font Awesome 官方 WordPress 外掛。

使用此元件需要直接在 JavaScript 和 DOM 中進行前端開發。它適用於將 Font Awesome 整合到他們的應用程式和元件中的開發人員。

概述

圖示選擇器可以配置為與 Font Awesome 套件一起使用，使用該套件的唯一標記，或不使用套件，僅給出 Font Awesome 版本號。

在非套件模式下，僅 Font Awesome Free 可用。

與套件一起使用時，根據該套件的配置，一切都可用。

• 字體棒專業版

• 棒字體 6

• 套件圖示上傳：上傳到套件的任何圖示都可以在選擇器中使用。

使用者在 fontawesome.com 上該套件的設定頁面上配置自己的套件，並產生一個 API 令牌，該令牌授權透過 GraphQL API 存取其套件的設定。

使用者向您的程式碼提供該套件令牌和 API 令牌。您的程式碼提供了 kit 令牌作為fa-icon-chooser道具。您的程式碼使用 API 令牌從令牌端點取得存取令牌，然後使用產生的存取令牌來授權handleQuery()回呼函數中的任何查詢。

您提供自己的一些不同回調函數的實現，用於處理查詢以及使用者與圖示選擇器互動的結果。

互動範例

1. 使用者在您的應用程式中執行一些操作來插入 Font Awesome 圖標，例如點擊「插入圖標」按鈕。
2. 您的程式碼安裝此圖示選擇器，提供各種所需的道具，並偵聽要在 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
	法蘭西斯·博茨福德	@frrrrances
	凱爾西傑克遜	@kelseythejackson