@skbkontur/react-icons

    4.5.0 • Public • Published

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

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

    current version

    В 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;
    };
    
    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>;

    Keywords

    none

    Install

    npm i @skbkontur/react-icons

    DownloadsWeekly Downloads

    2,654

    Version

    4.5.0

    License

    none

    Unpacked Size

    1.09 MB

    Total Files

    2234

    Last publish

    Collaborators

    • khlutkova
    • tihonove
    • ubitso4
    • zhzz
    • skbkontur-bot
    • fakefeik
    • original001
    • templeoftemplar
    • apocalyp0sys
    • lossir