Практически в каждый веб-проект нам приходится добавлять иконки, например: гамбургер-меню, иконки социальных сетей, кнопку поиска и различные другие иконки.

Обычно, в таком случае мы используем шрифт font awesome, CSS-файл которого включаем в HTML-код, получая, таким образом, доступ к иконкам.

Но, работая с проектом на React, мы не подключаем CSS к index.html. Вместо этого мы пользуемся npm-пакетами. Такой подход связан с определенными трудностями: достаточно трудно найти нужную иконку в одном npm-пакете.

Однако, react-icons позволяет решить эту проблему.

Этот пакет содержит иконки из различных наборов шрифтов, в том числе из font awesome, ion-icons, material icons. И все это работает без подключения дополнительных CSS-файлов.

Для установки пакета достаточно выполнить команду:

npm install react-icons

Для подключения иконки font awesome используется следующий синтаксис:

import { ICON_NAME } from "react-icons/fa";

Для подключения иконки ion-icons:

import { ICON_NAME } from "react-icons/io";

Для подключения иконки material icons:

import { ICON_NAME } from "react-icons/md";

На домашней странице пакета react-icons есть весьма полезный сервис поиска, позволяющий быстро найти нужную иконку.

Спасибо за внимание.

Перевод статьи Yogesh Chavan “Add font icons in React without additional CSS files”.