fa icon chooser

Font Awesome Icon-Auswahl

Eine mit Schablone erstellte Webkomponente zur Verwendung in anderen Projekten, die eine Such- und Erkennungserfahrung für Font Awesome-Symbole bieten möchten.

Es basiert auf der gleichen Algolia-Suche wie die Font Awesome Icon Gallery.

Wird beispielsweise im offiziellen WordPress-Plugin Font Awesome verwendet.

Die Verwendung dieser Komponente erfordert eine Frontend-Entwicklung direkt in JavaScript und im DOM. Es richtet sich an Entwickler, die Font Awesome in ihre Apps und Komponenten integrieren.

Überblick

Der Icon Chooser kann so konfiguriert werden, dass er mit einem Font Awesome-Kit funktioniert, wobei das eindeutige Token dieses Kits verwendet wird, oder ohne Kit, wenn nur eine Font Awesome-Versionsnummer angegeben wird.

Im Nicht-Kit-Modus ist nur Font Awesome Free verfügbar.

Bei Verwendung mit einem Kit ist alles verfügbar, je nach Konfiguration dieses Kits.

• Schriftart Awesome Pro

• Schriftart Awesome 6

• Kit-Symbol-Uploads: Alle zum Kit hochgeladenen Symbole sind in der Auswahl verfügbar.

Ein Benutzer konfiguriert sein eigenes Kit auf der Einstellungsseite dieses Kits auf Fontawesome.com und generiert ein API-Token, das den Zugriff auf die Einstellungen seines Kits über die GraphQL-API autorisiert.

Der Benutzer stellt Ihrem Code dieses Kit-Token und API-Token zur Verfügung. Ihr Code stellt den Kit-Token als Requisite für fa-icon-chooser bereit. Ihr Code verwendet das API-Token, um ein Zugriffstoken vom Token-Endpunkt abzurufen, und verwendet dann das resultierende Zugriffstoken, um alle Abfragen in Ihrer handleQuery() -Rückruffunktion zu autorisieren.

Sie stellen Ihre eigenen Implementierungen einiger verschiedener Rückruffunktionen zur Bearbeitung von Abfragen und den Ergebnissen der Benutzerinteraktion mit dem Icon Chooser bereit.

Beispielinteraktion

1. Der Benutzer führt in Ihrer App eine Aktion aus, um ein Font Awesome-Symbol einzufügen, z. B. durch Klicken auf die Schaltfläche „Symbol einfügen“.
2. Ihr Code stellt diese Symbolauswahl bereit, stellt die verschiedenen erforderlichen Requisiten bereit und wartet darauf, dass das finish im DOM ausgelöst wird.
3. Ihr Code verwendet das von diesem Ereignis bereitgestellte IconChooserResult -Objekt, um die vom Benutzer ausgewählten Ergebnisse darzustellen.

Ein IconChooserResult könnte beispielsweise wie folgt aussehen:

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

Wenn Ihr Code eine React-App ist, die die FontAwesomeIcon Komponente verwendet, können Sie Folgendes erstellen:

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

Wenn Ihr Code in JavaScript geschrieben ist und ein HTML-Element als String erstellen muss, könnte er so aussehen:

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

Wenn es sich bei Ihrem Code um ein WordPress-Plugin oder -Theme handelt, könnte ein Shortcode wie dieser entstehen:

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

Aufstellen

Wählen Sie eine der folgenden Optionen:

1. Verwenden Sie direkt die Webkomponente fa-icon-chooser . Diese Einrichtungsanweisungen finden Sie im Paket dieser Komponente.
2. Verwenden Sie eine JavaScript-Framework-Integration. Derzeit ist nur React verfügbar.

Mitwirkende

Das Font Awesome-Team:

	Name	GitHub
	Mike Wilkerson	@mlwilkerson
	Frances Botsford	@frrrances
	Kelsey Jackson	@kelseythejackson