fa icon chooser

Sélecteur d'icônes génial

Un composant Web construit avec Stencil, à utiliser dans d'autres projets souhaitant offrir une expérience de recherche et de découverte d'icônes Font Awesome.

Il est alimenté par la même recherche Algolia que la galerie d'icônes Font Awesome.

Utilisé, par exemple, dans le plugin WordPress officiel Font Awesome.

L'utilisation de ce composant nécessite un développement front-end directement en JavaScript et dans le DOM. Il est destiné aux développeurs intégrant Font Awesome dans leurs applications et composants.

Aperçu

Le sélecteur d'icônes peut être configuré pour fonctionner avec un kit Font Awesome, en utilisant le jeton unique de ce kit, ou sans kit, avec juste un numéro de version Font Awesome.

En mode non-kit, seul Font Awesome Free est disponible.

Lorsqu'il est utilisé avec un kit, tout est disponible, selon la configuration de ce kit.

• Police géniale Pro

• Police géniale 6

• Téléchargements d'icônes de kit : toutes les icônes téléchargées dans le kit sont disponibles dans le sélecteur.

Un utilisateur configure son propre kit sur la page des paramètres de ce kit sur fontawesome.com et génère un jeton API qui autorise l'accès aux paramètres de son kit via l'API GraphQL.

L'utilisateur fournit ce jeton de kit et ce jeton API à votre code. Votre code fournit le jeton du kit comme accessoire à fa-icon-chooser . Votre code utilise le jeton API pour obtenir un jeton d'accès à partir du point de terminaison du jeton, puis utilise ce jeton d'accès résultant pour autoriser toutes les requêtes dans votre fonction de rappel handleQuery() .

Vous fournissez vos propres implémentations de quelques fonctions de rappel différentes pour gérer les requêtes et les résultats de l'interaction de l'utilisateur avec le sélecteur d'icônes.

Exemple d'interaction

1. L'utilisateur effectue une action dans votre application pour insérer une icône Font Awesome, comme cliquer sur un bouton « Insérer une icône ».
2. Votre code monte ce sélecteur d'icônes en fournissant les différents accessoires requis et écoute l'événement finish à déclencher dans le DOM.
3. Votre code utilise l'objet IconChooserResult fourni par cet événement pour restituer les résultats choisis par l'utilisateur.

Par exemple, un IconChooserResult pourrait être :

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

Si votre code est une application React utilisant le composant FontAwesomeIcon , vous pourriez créer ceci :

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

Si votre code est écrit en JavaScript et doit créer un élément HTML sous forme de chaîne, il pourrait ressembler à ceci :

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

Si votre code est un plugin ou un thème WordPress, il peut produire un shortcode comme celui-ci :

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

Installation

Choisissez l'une des options suivantes :

1. Utilisez directement le composant Web fa-icon-chooser . Recherchez ces instructions de configuration dans le package de ce composant.
2. Utilisez une intégration de framework JavaScript. Actuellement, le seul disponible est pour React.

Contributeurs

L’équipe Font Awesome :

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