@skbkontur/react-icons

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

Для использования иконок необходимо установить пакет @skbkontur/react-icons. В конфиге вебпака требуется настроить css-loader с включенными модулями.

В 4.0 исходный код иконок распространяется в виде ES6 модулей. Это необходимо для обеспечения правильной работы tree-shaking.

Кроме этого все иконки доступны в виде именованного импорта из корня.

Если вы загружаете компоненты библиотеки в nodejs, например, в unit тестах, вам необходимо настроить трансформацию в CommonJS модулей из @skbkontur/react-icons, чтобы избежать ошибки Error [ERR_REQUIRE_ESM]: Must use import to load ES Module. Для сборки бандла в webpack конфиге ничего дополнительно настраивать не нужно. В скором времени появится нативная поддержка ES Modules в Jest

Props

type IconProps = {
  color?: string;
  name: IconName; // только для компонента Icon
  size?: number | string;
  disableCompensation?: boolean;
};

type IconName =
  | 'Menu'
  | 'Add'
  | 'ArchivePack'
  | 'ArchiveUnpack'
  | 'Attach'
  | 'Baby'
  | 'Backward'
  | 'BarcodeScanner'
  | 'Briefcase'
  | 'Calculator'
  | 'Calendar'
  | 'Card'
  | 'Certificate'
  | 'Clear'
  | ... 218 more ...
  | 'Infiniti';

Поиск имени иконок

Вся коллекция иконок доступна на гайдах. Там есть удобный поиск по иконам

Варианты использования иконок.

Для уменьшения размера бандла рекомендуется использовать компонент с конкретной иконкой

import { Icon } from './';
import { Ok } from './icons/Ok';

<div>
  <Ok size={16} color="red" />
  <Icon name="Ok" size={24} color="blue" />
  <Icon.Ok size={32} color="green" />
</div>;

Changelog

Список изменений доступен по ссылке ссылке

Все иконки

import { Icon } from './';

<div>
  <div style={{ columns: '3' }}>
    {Object.keys(Icon).map(name => {
      return (
        <div style={{ margin: '2px' }}>
          <Icon name={name} />
          <span style={{ marginLeft: '2px' }}> - {name}</span>
        </div>
      );
    })}
  </div>
</div>;