Меню

Использование и настройка Font Awesome 5 с React

Если происходит работа над внешним интерфейсом, Font Awesome – отличное дополнение для известных значков социальных сетей и многого другого. Это особенно полезно для отображения значков, представляющих ссылки на другие источники, такие как YouTube или Twitter.

Использование и настройка Font Awesome 5 с React

Font Awesome

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

Font Awesome предоставляет множество различных значков для всего, от простых вещей, таких как чашка кофе, до логотипов известных брендов, таких как YouTube. Если хочется увидеть больше, можно заглянуть в их галерею. Там можно найти как стандартные иконки социальных сетей, так и модернизированные, и выполненные в одном стиле. Как правило, они размещаются в пакете и при загрузке скачиваются все.

Версия 5 – это самая последняя (стабильная) версия Font Awesome. Для начала работы с ней нужно ознакомиться с журналом изменений Font Awesome, чтобы узнать больше.

Рассказ о двух портах

Когда используется Font Awesome, он предоставляет два разных способа ссылки на свои библиотеки. Мотивация использовать их будет зависеть от того, чего верстальщик пытается достичь, а также от требований проекта.

Первый способ – импортировать их по отдельности в любой компонент, на который они ссылаются.

Это лучше тем, что делает их использование чрезвычайно простым. Это также позволяет сузить импорт до того, что нужно для окончательной сборки. Однако, если используется это на нескольких страницах, это может стать настоящей проблемой.

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

Работа с Font Awesome API

После того, как была импортирована библиотека в проект, появится множество интересных вариантов того, что делать с иконками.

Font Awesome имеет обычные и надежные версии большинства иконок. Можно установить их ширину и даже повернуть сами изображения, просто передав значения в API компонента. Также можно наложить их и даже указать собственные классы или такие вещи, как исходный SVG. Даже можно анимировать значки, указав поведение, например вращение или пульсацию.

Настройка проекта React

Использование и настройка Font Awesome 5 с React

Итак, есть проект React, и все готово для импорта Font Awesome, чтобы отображать значки социальных сетей на страницах. Первый шаг – использовать npm для установки основных зависимостей для Font Awesome.

Затем, вероятно, захочется установить бесплатные SVG-изображения со значками бренда, которые предлагает Font Awesome. К ним относятся фирменные значки таких компаний, как Apple, Microsoft и других.

Это все, что нужно для free-настройки. Но, если хочется пополнить свою учетную запись и использовать pro-значки, также можно при желании запустить соответствующий скрипт. Но как правило, для работы будет достаточно только npm-загрузки и установки.

 

Читайте также:  настройки для sms центра mts

Добавить комментарий

Adblock
detector