Библиотека @ant-design/icons

Библиотека @ant-design/icons представляет собой официальный набор иконок для экосистемы Ant Design и используется совместно с компонентами интерфейса в React-приложениях. Она предоставляет удобный способ подключения, рендеринга и кастомизации SVG-иконок.

В основе библиотеки лежит принцип SVG-иконок как React-компонентов. Каждая иконка импортируется как отдельный компонент и может использоваться непосредственно в JSX. Такой подход обеспечивает:

высокую производительность
гибкость стилизации
поддержку tree-shaking
простую интеграцию с компонентами Ant Design

Иконки реализованы как векторные SVG-элементы, что позволяет масштабировать их без потери качества и изменять параметры отображения через свойства React.

Установка библиотеки

Библиотека устанавливается отдельно от основной библиотеки компонентов Ant Design.

Установка через npm:

npm install @ant-design/icons

Установка через yarn:

yarn add @ant-design/icons

После установки иконки становятся доступны для импорта в компонентах React.

Принцип работы иконок

Каждая иконка в библиотеке является React-компонентом, который оборачивает SVG-графику.

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

import { SmileOutlined } from '@ant-design/icons';

function App() {
  return (
    <div>
      <SmileOutlined />
    </div>
  );
}

При рендеринге компонент создаёт SVG-разметку внутри DOM.

Структура сгенерированного HTML приблизительно выглядит так:

<span role="img" class="anticon anticon-smile">
  <svg viewBox="0 0 1024 1024">
    ...
  </svg>
</span>

Внешний элемент <span> используется для единообразной стилизации и управления поведением иконок.

Категории иконок

Библиотека содержит несколько сотен иконок, разделённых по стилям отображения.

Основные типы:

Outline

Контурные иконки с минималистичным дизайном.

Пример:

import { HomeOutlined } from '@ant-design/icons';

Использование:

<HomeOutlined />

Filled

Заполненные иконки с более плотной графикой.

import { HomeFilled } from '@ant-design/icons';

Использование:

<HomeFilled />

TwoTone

Иконки с двухцветной палитрой.

import { HeartTwoTone } from '@ant-design/icons';

Использование:

<HeartTwoTone />

TwoTone-иконки позволяют задавать собственные цвета.

Использование иконок внутри компонентов Ant Design

Иконки активно применяются в стандартных компонентах интерфейса.

Кнопки

import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

<Button icon={<SearchOutlined />}>
  Поиск
</Button>

Иконка передаётся через свойство icon.

Поля ввода

import { Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';

<Input prefix={<UserOutlined />} placeholder="Имя пользователя" />

Иконка отображается перед текстовым полем.

Управление размером иконок

Размер иконки определяется через CSS или inline-стили.

Пример изменения размера:

<SmileOutlined style={{ fontSize: '24px' }} />

Или через класс:

.large-icon {
  font-size: 32px;
}

<SmileOutlined className="large-icon" />

Иконка масштабируется пропорционально благодаря SVG-формату.

Изменение цвета иконок

Цвет управляется свойством color.

<SmileOutlined style={{ color: 'red' }} />

Также возможно использовать CSS:

.icon-blue {
  color: blue;
}

<SmileOutlined className="icon-blue" />

SVG внутри иконки наследует цвет от CSS-свойства color.

Настройка TwoTone-иконок

TwoTone-иконки имеют основной и вторичный цвет.

Пример:

<HeartTwoTone twoToneColor="#eb2f96" />

Можно задать цвета глобально:

import { setTwoToneColor } from '@ant-design/icons';

setTwoToneColor('#1890ff');

После этого все TwoTone-иконки будут использовать указанный цвет.

Вращение и трансформация иконок

Библиотека позволяет вращать иконки с помощью свойства rotate.

<LoadingOutlined rotate={90} />

Также доступны CSS-анимации.

Пример вращения через CSS:

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

<LoadingOutlined className="spin" />

Так реализуются индикаторы загрузки.

Обработчики событий

Поскольку иконка является React-компонентом, она поддерживает обработчики событий.

Пример:

<DeleteOutlined onCl ick={() => console.log('Удаление')} />

Также возможно использование hover-эффектов:

.icon-hover:hover {
  color: red;
  cursor: pointer;
}

Создание кастомных иконок

Библиотека позволяет использовать собственные SVG-иконки.

Для этого применяется компонент Icon.

Импорт:

import Icon from '@ant-design/icons';

Пример создания пользовательской иконки:

const MySvg = () => (
  <svg viewBox="0 0 1024 1024">
    <path d="..." />
  </svg>
);

Использование:

<Icon component={MySvg} />

Это позволяет интегрировать любые SVG-иконки в систему Ant Design.

Использование SVG-файла

SVG можно импортировать напрямую.

import Icon from '@ant-design/icons';
import { ReactComponent as Logo } from './logo.svg';

<Icon component={Logo} />

Такой подход часто применяется при создании брендированных интерфейсов.

Производительность и tree-shaking

Библиотека оптимизирована для современных сборщиков.

При импорте:

import { SmileOutlined } from '@ant-design/icons';

в сборку попадает только конкретная иконка, а не вся библиотека.

Это достигается благодаря:

ES-модулям
статическому импорту
поддержке tree-shaking в Webpack и Vite

Не рекомендуется использовать массовый импорт:

import * as Icons from '@ant-design/icons';

Такой подход увеличивает размер бандла.

Динамическая загрузка иконок

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

Пример:

const IconComponent = React.lazy(() =>
  import('@ant-design/icons/SmileOutlined')
);

Это позволяет загружать иконки только при необходимости.

Доступность (Accessibility)

Иконки Ant Design поддерживают базовые механизмы доступности.

HTML-структура включает атрибут:

role="img"

Если иконка используется как кнопка, рекомендуется добавить aria-label.

Пример:

<DeleteOutlined aria-label="Удалить элемент" />

Это улучшает работу экранных дикторов.

Использование иконок в типографике

Иконки могут использоваться внутри текста.

<p>
  <InfoCircleOutlined /> Дополнительная информация
</p>

Благодаря inline-поведению SVG-элементов иконки корректно выравниваются по текстовой линии.

Оптимизация при использовании большого количества иконок

При масштабных интерфейсах рекомендуется:

импортировать только нужные иконки
избегать динамических строковых импортов
использовать memoization для сложных компонентов

Пример оптимизации:

const IconMemo = React.memo(() => <SmileOutlined />);

Это уменьшает количество перерисовок.

Структура пакета

Внутренняя структура библиотеки включает несколько ключевых частей:

SVG definitions — исходные векторные данные
React components — обёртки для использования в JSX
helpers — утилиты для управления TwoTone-цветами
IconBase — базовый компонент рендеринга

Основной рендеринг происходит через компонент IconBase, который отвечает за:

генерацию SVG
добавление CSS-классов
обработку свойств компонента

Интеграция с системой тем Ant Design

Иконки автоматически адаптируются к теме приложения.

Цвет иконок наследуется от:

текущей цветовой схемы
переменных CSS
темы Ant Design

Например, при использовании тёмной темы иконки автоматически отображаются с корректной контрастностью.

Использование иконок в икон-кнопках

Иногда кнопка содержит только иконку.

<Button shape="circle" icon={<SearchOutlined />} />

Такие кнопки широко применяются в:

панелях инструментов
таблицах
карточках
навигационных элементах

Часто используемые иконки

Некоторые иконки используются особенно часто в интерфейсах:

Иконка	Назначение
SearchOutlined	поиск
UserOutlined	пользователь
SettingOutlined	настройки
DeleteOutlined	удаление
EditOutlined	редактирование
PlusOutlined	добавление
MinusOutlined	удаление элемента
LoadingOutlined	индикатор загрузки

Эти иконки формируют основу большинства пользовательских интерфейсов.

Практический пример интерфейса

Пример панели действий:

import {
  EditOutlined,
  DeleteOutlined,
  EyeOutlined
} from '@ant-design/icons';

function Actions() {
  return (
    <div>
      <EyeOutlined />
      <EditOutlined />
      <DeleteOutlined />
    </div>
  );
}

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

Особенности версий библиотеки

В версии Ant Design 4 произошёл переход с icon-font на SVG-иконки.

Преимущества нового подхода:

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

Расширение библиотеки

При необходимости можно объединить:

иконки Ant Design
собственные SVG
сторонние библиотеки

Все они могут быть приведены к единому виду через компонент Icon.

Это позволяет сохранять единый визуальный стиль интерфейса.

Библиотека @ant-design/icons

Установка библиотеки

Принцип работы иконок

Категории иконок

Outline

Filled

TwoTone

Использование иконок внутри компонентов Ant Design

Кнопки

Поля ввода

Меню

Управление размером иконок

Изменение цвета иконок

Настройка TwoTone-иконок

Вращение и трансформация иконок

Обработчики событий

Создание кастомных иконок

Использование SVG-файла

Производительность и tree-shaking

Динамическая загрузка иконок

Доступность (Accessibility)

Использование иконок в типографике

Оптимизация при использовании большого количества иконок

Структура пакета

Интеграция с системой тем Ant Design

Использование иконок в икон-кнопках

Часто используемые иконки

Практический пример интерфейса

Особенности версий библиотеки

Расширение библиотеки