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

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

Импорт SVG как React-компонента

Современные сборщики, такие как Webpack или Vite, позволяют импортировать SVG напрямую как React-компоненты:

import { ReactComponent as MyIcon } from './icons/my-icon.svg';
import { Button } from 'antd';

function App() {
  return (
    <Button icon={<MyIcon />}>
      Кнопка с кастомной иконкой
    </Button>
  );
}

Особенности метода:

  • SVG становится полноценным React-компонентом и может принимать пропсы className, style, width, height.
  • Легко интегрируется с компонентами Ant Design, которые поддерживают проп icon.
  • Позволяет управлять цветом через CSS (fill, stroke).

Использование Icon с кастомным SVG

Ant Design предоставляет компонент Icon, который можно расширять для работы с кастомными SVG через createFromIconfontCN или напрямую:

import { Icon } from 'antd';
import { ReactComponent as CustomSvg } from './icons/custom.svg';

const CustomIcon = (props) => <Icon component={CustomSvg} {...props} />;

function App() {
  return <CustomIcon style={{ fontSize: 24, color: '#1890ff' }} />;
}

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

  • Поддержка стандартного API Icon (style, className, spin).
  • Совместимость с другими иконками Ant Design.
  • Возможность динамически менять размер и цвет через пропсы.

Стилизация кастомных SVG

Кастомные SVG легко подстраиваются под стили Ant Design через CSS или inline-стили. Основные подходы:

  1. Изменение цвета через fill:
<CustomIcon style={{ fill: '#52c41a', fontSize: 32 }} />
  1. Использование CSS-классов:
.my-svg-icon {
  width: 40px;
  height: 40px;
  fill: #faad14;
}
<CustomIcon className="my-svg-icon" />
  1. Анимация SVG через transform или stroke-dasharray:
<CustomIcon style={{ animation: 'spin 2s linear infinite' }} />
@keyframes spin {
  100% { transform: rotate(360deg); }
}

Интеграция в компоненты Ant Design

Кастомные SVG можно использовать практически во всех компонентах, где поддерживается icon:

  • Buttons:
<Button icon={<CustomIcon />}>Действие</Button>
  • Menus:
<Menu>
  <Menu.Item icon={<CustomIcon />}>Пункт меню</Menu.Item>
</Menu>
  • Input с иконкой:
<Input prefix={<CustomIcon />} placeholder="Введите текст" />
  • Tabs с иконкой:
<Tabs>
  <Tabs.TabPane tab={<span><CustomIcon />Вкладка 1</span>} key="1" />
</Tabs>

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

Для больших проектов удобно хранить набор SVG в отдельной папке и динамически импортировать их через контекст Webpack или Vite:

const svgContext = require.context('./icons', false, /\.svg$/);

function getIcon(name) {
  const SvgComponent = svgContext(`./${name}.svg`).ReactComponent;
  return <SvgComponent />;
}

<Button icon={getIcon('custom')}>Кнопка</Button>

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

  • Упрощает управление большим количеством SVG.
  • Позволяет централизованно применять стили.
  • Уменьшает количество ручных импортов.

Работа с масштабируемыми иконками

SVG по своей природе масштабируемы, но для интеграции с Ant Design важно учитывать:

  • Проп fontSize в стилях управляет размером, если используется компонент Icon.
  • Для React-компонента можно использовать width и height напрямую.
  • Не рекомендуется задавать фиксированные размеры в SVG-файле, лучше использовать viewBox и управлять размерами через CSS.

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

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

// icons/index.js
import { ReactComponent as SearchIcon } from './search.svg';
import { ReactComponent as UserIcon } from './user.svg';

export const Icons = {
  Search: (props) => <SearchIcon {...props} />,
  User: (props) => <UserIcon {...props} />,
};

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

import { Icons } from './icons';

<Button icon={<Icons.Search />}>Поиск</Button>

Такой подход обеспечивает:

  • Централизованное управление всеми иконками.
  • Легкость стилизации.
  • Совместимость с компонентами Ant Design.

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

  • Минимизировать SVG через svgo перед импортом.
  • Использовать спрайты или динамический импорт для большого количества иконок.
  • Избегать прямого вставления большого SVG-кода в JSX без оптимизации.

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

Оглавление