fa icon chooser

Seletor de ícones impressionantes de fontes

Um Web Component construído com Stencil, para uso em outros projetos que desejam fornecer uma experiência de pesquisa e descoberta de Font Awesome Icon.

É alimentado pela mesma pesquisa Algolia da Font Awesome Icon Gallery.

Usado, por exemplo, no plugin oficial do WordPress Font Awesome.

O uso deste componente requer desenvolvimento front-end diretamente em JavaScript e DOM. Destina-se a desenvolvedores que integram o Font Awesome em seus aplicativos e componentes.

Visão geral

O Icon Chooser pode ser configurado para funcionar com um Font Awesome Kit, usando o token exclusivo desse kit, ou sem um kit, dado apenas um número de versão do Font Awesome.

No modo não kit, apenas Font Awesome Free está disponível.

Quando utilizado com kit, tudo fica disponível, de acordo com a configuração desse kit.

• Fonte incrível Pro

• Fonte incrível 6

• Uploads de ícones do kit: quaisquer ícones carregados no kit estarão disponíveis no seletor.

Um usuário configura seu próprio kit na página de configurações desse kit em fontawesome.com e gera um token de API que autoriza o acesso às configurações de seu kit por meio da API GraphQL.

O usuário fornece esse token de kit e token de API ao seu código. Seu código fornece o token do kit como suporte para fa-icon-chooser . Seu código usa o token de API para obter um token de acesso do endpoint do token e, em seguida, usa esse token de acesso resultante para autorizar qualquer consulta em sua função de retorno de chamada handleQuery() .

Você fornece suas próprias implementações de algumas funções de retorno de chamada diferentes para lidar com consultas e os resultados da interação do usuário com o Icon Chooser.

Exemplo de interação

1. O usuário realiza alguma ação em seu aplicativo para inserir um ícone Font Awesome, como clicar no botão "inserir ícone".
2. Seu código monta este Icon Chooser fornecendo os vários adereços necessários e escuta o evento finish a ser disparado no DOM.
3. Seu código usa o objeto IconChooserResult entregue por esse evento para renderizar os resultados da escolha do usuário.

Por exemplo, um IconChooserResult pode ser:

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

Se o seu código for um aplicativo React usando o componente FontAwesomeIcon , você poderá construir isto:

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

Se o seu código for escrito em JavaScript e precisar construir um elemento HTML como uma string, ele pode ter esta aparência:

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

Se o seu código for um plugin ou tema do WordPress, ele poderá produzir um shortcode como este:

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

Configurar

Escolha um dos seguintes:

1. Use o componente web fa-icon-chooser diretamente. Encontre essas instruções de configuração no pacote desse componente.
2. Use uma integração de estrutura JavaScript. Atualmente, o único disponível é para React.

Colaboradores

A equipe do Font Awesome:

	Nome	GitHub
	Mike Wilkerson	@mlwilkerson
	Frances Botsford	@frrances
	Kelsey Jackson	@kelseythejackson