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