fa icon chooser

Выбор значков Font Awesome

Веб-компонент, созданный с помощью Stencil, для использования в других проектах, которые хотят предоставить возможность поиска и обнаружения значков Font Awesome.

Он работает на том же поиске Algolia, что и галерея иконок Font Awesome.

Используется, например, в официальном плагине WordPress Font Awesome.

Использование этого компонента требует разработки интерфейса непосредственно в JavaScript и DOM. Он предназначен для разработчиков, интегрирующих Font Awesome в свои приложения и компоненты.

Обзор

Средство выбора значков можно настроить для работы с набором Font Awesome, используя уникальный токен этого набора, или без набора, указав только номер версии Font Awesome.

В режиме без комплекта доступен только Font Awesome Free.

При использовании с комплектом доступно все в соответствии с конфигурацией этого комплекта.

• Шрифт Awesome Pro

• Шрифт Awesome 6

• Загрузка значков комплекта: любые значки, загруженные в комплект, доступны в средстве выбора.

Пользователь настраивает свой собственный комплект на странице настроек этого комплекта на сайте Fontawesome.com и генерирует токен API, который разрешает доступ к настройкам своего комплекта через GraphQL API.

Пользователь предоставляет этот токен комплекта и токен API вашему коду. Ваш код предоставляет токен комплекта в качестве опоры для fa-icon-chooser . Ваш код использует токен API для получения токена доступа из конечной точки токена, а затем использует полученный токен доступа для авторизации любых запросов в вашей функции обратного вызова handleQuery() .

Вы предоставляете свои собственные реализации нескольких различных функций обратного вызова для обработки запросов и результатов взаимодействия пользователя с инструментом выбора значков.

Пример взаимодействия

1. Пользователь выполняет какое-либо действие в вашем приложении, чтобы вставить значок Font Awesome, например нажимает кнопку «Вставить значок».
2. Ваш код монтирует этот инструмент выбора значков, предоставляя различные необходимые реквизиты и прослушивает событие finish которое будет запущено в DOM.
3. Ваш код использует объект IconChooserResult , доставленный этим событием, для отображения результатов по выбору пользователя.

Например, IconChooserResult может быть:

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

Если ваш код представляет собой приложение React, использующее компонент FontAwesomeIcon , вы можете создать следующее:

 < 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 напрямую. Найдите эти инструкции по установке в пакете этого компонента.
2. Используйте интеграцию с фреймворком JavaScript. В настоящее время доступен только один вариант для React.

Авторы

Команда Font Awesome:

	Имя	GitHub
	Майк Вилкерсон	@mlwilkerson
	Фрэнсис Ботсфорд	@frrrances
	Келси Джексон	@kelseythejackson