fa icon chooser

Selector de iconos de fuente impresionante

Un componente web creado con Stencil, para usar en otros proyectos que quieran brindar una experiencia de búsqueda y descubrimiento de iconos Font Awesome.

Funciona con la misma búsqueda de Algolia que Font Awesome Icon Gallery.

Utilizado, por ejemplo, en el complemento oficial de WordPress Font Awesome.

El uso de este componente requiere un desarrollo front-end directamente en JavaScript y DOM. Está destinado a desarrolladores que integran Font Awesome en sus aplicaciones y componentes.

Descripción general

El Selector de iconos se puede configurar para que funcione con un kit Font Awesome, usando el token único de ese kit, o sin un kit, con solo un número de versión de Font Awesome.

En el modo sin kit, solo está disponible Font Awesome Free.

Cuando se utiliza con un kit, todo está disponible, según la configuración de ese kit.

• Fuente impresionante Pro

• Fuente impresionante 6

• Cargas de íconos del kit: cualquier ícono cargado en el kit está disponible en el selector.

Un usuario configura su propio kit en la página de configuración de ese kit en fontawesome.com y genera un token API que autoriza el acceso a la configuración de su kit a través de la API GraphQL.

El usuario proporciona ese token de kit y token de API a su código. Su código proporciona el token del kit como accesorio para fa-icon-chooser . Su código usa el token API para obtener un token de acceso desde el punto final del token y luego usa ese token de acceso resultante para autorizar cualquier consulta en su función de devolución de llamada handleQuery() .

Usted proporciona sus propias implementaciones de algunas funciones de devolución de llamada diferentes para manejar consultas y los resultados de la interacción del usuario con el Selector de íconos.

Ejemplo de interacción

1. El usuario realiza alguna acción en su aplicación para insertar un ícono de Font Awesome, como hacer clic en el botón "insertar ícono".
2. Su código monta este Selector de íconos proporcionando los diversos accesorios necesarios y escucha el evento finish que se activa en el DOM.
3. Su código utiliza el objeto IconChooserResult entregado por ese evento para representar los resultados elegidos por el usuario.

Por ejemplo, un IconChooserResult podría ser:

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

Si su código es una aplicación React que utiliza el componente FontAwesomeIcon , puede crear esto:

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

Si su código está escrito en JavaScript y necesita crear un elemento HTML como una cadena, podría verse así:

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

Si su código es un complemento o tema de WordPress, podría generar un código corto como este:

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

Configuración

Elija uno de los siguientes:

1. Utilice el componente web fa-icon-chooser directamente. Encuentre esas instrucciones de configuración en el paquete de ese componente.
2. Utilice una integración de marco de JavaScript. Actualmente, el único disponible es para React.

Colaboradores

El equipo de Font Awesome:

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