Создание собственных наборов иконок

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

Импорт и использование стандартных иконок

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

npm install @ant-design/icons

После установки стандартные иконки импортируются напрямую:

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

<HomeOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
<UserOutlined />

Ключевые моменты:

  • Все иконки представлены как React-компоненты.
  • Можно применять стили через проп style или оборачивать их в span/div с классами.

Создание кастомной иконки из SVG

Для интеграции собственной иконки используется компонент createFromIconfontCN или оборачивание SVG в React-компонент. На практике предпочтительно второй способ для полного контроля.

Пример создания собственного компонента:

import React from 'react';
import { Icon } from '@ant-design/icons';

const MyCustomSvg = () => (
  <svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor">
    <path d="M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0zM512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z" />
  </svg>
);

const MyCustomIcon = (props) => <Icon component={MyCustomSvg} {...props} />;

<MyCustomIcon style={{ fontSize: '32px', color: 'red' }} />

Особенности:

  • Icon с пропом component принимает React-компонент, возвращающий SVG.
  • SVG должен быть адаптивным: использовать 1em для ширины и высоты, currentColor для цвета.
  • Дополнительные стили передаются через проп style.

Создание целого набора иконок

Чтобы управлять большим количеством иконок, создают отдельный модуль:

// icons.js
import { Icon } from '@ant-design/icons';
import React from 'react';

const SvgHome = () => (
  <svg viewBox="0 0 1024 1024" fill="currentColor">
    <path d="M512 64L64 512h128v384h256V640h128v256h256V512h128z" />
  </svg>
);

const SvgUser = () => (
  <svg viewBox="0 0 1024 1024" fill="currentColor">
    <path d="M512 512a256 256 0 1 0 0-512 256 256 0 0 0 0 512zm0 64c-141.376 0-512 70.144-512 211.2V960h1024v-172.8C1024 646.144 653.376 576 512 576z" />
  </svg>
);

export const CustomIcons = {
  Home: (props) => <Icon component={SvgHome} {...props} />,
  User: (props) => <Icon component={SvgUser} {...props} />,
};

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

import { CustomIcons } from './icons';

<CustomIcons.Home style={{ fontSize: '40px', color: '#52c41a' }} />
<CustomIcons.User style={{ fontSize: '40px', color: '#faad14' }} />

Преимущества:

  • Все иконки централизованы.
  • Легко масштабировать проект, добавляя новые SVG.
  • Поддерживаются стандартные стили Ant Design.

Интеграция IconFont для динамических наборов

Если требуется загрузка большого количества иконок через онлайн-шрифты, используется createFromIconfontCN:

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

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1234567_abcd.js',
});

<IconFont type="icon-home" style={{ fontSize: '24px', color: '#1890ff' }} />
<IconFont type="icon-user" />

Особенности подхода:

  • scriptUrl указывает на хостинг с иконками в формате IconFont.
  • Тип иконки соответствует имени, заданному в проекте IconFont.
  • Удобно для проектов с большим количеством иконок и динамическими обновлениями.

Рекомендации по стилю и производительности

  1. Оптимизация SVG: использовать минимизированные пути и атрибуты для уменьшения размера бандла.
  2. Единообразие размеров: применять 1em для ширины и высоты, чтобы иконки легко масштабировались вместе с текстом.
  3. Использование currentColor: позволяет изменять цвет иконок через CSS, сохраняя гибкость темизации.
  4. Кеширование IconFont: если загружается онлайн-шрифт, рекомендуется кэширование для ускорения рендеринга.
  5. Модульность: группировать иконки по смысловым категориям, чтобы облегчить поддержку кода.

Поддержка TypeScript

Для TypeScript можно добавить типизацию:

import { IconProps } from '@ant-design/icons/lib/components/Icon';

export const CustomIcons: Record<string, (props?: IconProps) => JSX.Element> = {
  Home: (props) => <Icon component={SvgHome} {...props} />,
  User: (props) => <Icon component={SvgUser} {...props} />,
};

Это обеспечивает автодополнение и проверку типов при использовании собственных иконок.

Создание собственных наборов иконок в Ant Design сочетает удобство встроенных компонентов с гибкостью кастомных SVG, обеспечивая единый стиль приложения и лёгкость масштабирования визуальных элементов.

Оглавление