Пользовательский интерфейс (UI) веб-сайта или мобильного приложения состоит из множества элементов. Одним из наиболее распространенных являются иконки.

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

И если вы являетесь разработчиком React.js, то вам повезло — существует множество библиотек иконок React, которые можно использовать для ускорения разработки и проектирования сайтов. Например, если вы задаетесь вопросом, как добавить иконки для дизайна или как добавить социальные иконки в React, эти библиотеки позволят вам легко найти и импортировать нужные иконки.

Итак, вот список лучших библиотек иконок React, а также способы их установки и использования.

1. Unicons

Unicons — это бесплатная библиотека иконок с открытым исходным кодом, разработанная компанией IconScout. Она содержит тысячи пиктограмм в форматах SVG или веб-шрифтов. Все эти значки можно настраивать, и они представлены в нескольких различных стилях: линейный, монохромный, сплошной и тонкий.

Как же использовать Unicons? Вы можете загрузить библиотеку React, импортировать ее как CSS, использовать как SVG-файлы и как файл шрифта. Но это еще не все — Unicons также доступен в интеграциях IconScout с Adobe XD, Sketch, Figma и другими — таким образом, вы можете использовать один и тот же набор иконок на этапах проектирования и разработки. Для получения дополнительной информации ознакомьтесь с этим руководством по использованию Unicons.

Особенности

• Более 4500 значков в четырех различных стилях для 27 категорий
• Размеры и цвета можно настраивать
• Интеграция IconScout с популярными инструментами дизайна
• Доступны в виде веб-шрифтов и SVG

Установка

	
npm install --save @iconscout/react-unicons

Пример исользования

	
// use individual icons

import React from 'react';
import UilReact from '@iconscout/react-unicons/icons/uil-react'

const App = () => {
  return 
};

export default App;

// or use as a full package

import React from 'react';
import * as Unicons from '@iconscout/react-unicons';

const App = () => {
  return 
};

export default App;

2. Font Awesome

Font Awesome — это популярная библиотека иконок, включающая более 2 000 бесплатных и открытых иконок. Кроме того, предлагается профессиональная подписка стоимостью от 79 долл. в год, которая дает доступ почти к 20 000 значков. Эти значки можно настраивать, изменяя их размеры и цвета.

Особенности

• Бесплатный доступ к более чем 2 000 значков в двух стилях: обычный и сплошной
• Возможность настройки размеров и цветов

Установка

	
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Пример использования

	
// import an icon in an individual component

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = 
ReactDOM.render(element, document.body)

// or import it in your App.js file for global use

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)

3. React Feather

React Feather — это коллекция минималистичных иконок с открытым исходным кодом для React, основанная на библиотеке Feather Icons. Этот набор иконок подчеркивает простоту, последовательность и читабельность.

Особенности

• Получите доступ к 287 минималистичным иконкам с открытым исходным кодом
• Возможность настройки таких характеристик иконок, как цвет и размер

Установка

	
npm i react-feather

Пример использования

	
import React from 'react';
import { Camera } from 'react-feather';

const App = () => {
  return 
};

export default App;

4. Material UI

На Github Material UI имеет более 81 000 звезд и является одним из самых популярных инструментов для создания пользовательского интерфейса. Но что именно представляет собой Material UI? Material UI (или MUI) — это не просто библиотека иконок, а набор инструментов пользовательского интерфейса, помогающих быстро разрабатывать и отправлять проекты.

Он предоставляет доступ к библиотеке Material Icons, которая была создана компанией Google в соответствии с системой Material Design. Их можно использовать в пяти различных стилях: залитый (по умолчанию), очерченный, закругленный, двухцветный и резкий. С помощью MUI можно импортировать эти Material-иконки в виде SVG-иконок или воспользоваться оберткой React для использования пользовательских шрифтов и SVG-иконок.

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

Особенности

• Доступ к 2 100 иконкам Material в пяти стилях
• Настройка цветов и размеров
• Вы можете использовать обертку Icon React для использования пользовательских шрифтов и SVG-иконок

Установка

Если вы еще не используете Material UI в своем проекте, вы можете добавить его с помощью:

	
npm install @material-ui/core

Пример использования

	
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

//or

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

5. Styled Icons

Styled Icons позволяет импортировать иконки из популярных библиотек, таких как Bootstrap, Feather, Font Awesome, Material Design, Remix и других, и использовать их в качестве стилизованных компонентов. Если вы не знаете, что это такое, то стилизованные компоненты позволяют писать CSS (каскадные таблицы стилей) на JavaScript.

Возможности

• Доступ к более чем 20 000 значков из популярных пакетов значков
• Импорт значков в виде стилизованных компонентов
• Настройка таких характеристик значков, как цвет и размер

Установка

	
npm install styled-icons --save

Пример использования

	
import React, {Fragment} from 'react'
import {AccountCircle, Lock} from '@styled-icons/material'

const App = () => (
  
    
    
  
)

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