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

Ссылка на пакет в nexus

Библиотека предоставляет два варианта иконок:

1. Цельные иконки (например, CheckIcon): такие иконки содержат все доступные начертания иконок, но при этом занимают приблизительно в 10 раз больше места в бандле, чем гранулярные иконки
2. Гранулярные иконки (например, CheckIcon16Light): такие иконки содержат всего одно из 10-ти доступных начертаний, но при этом могут принимать все пропы, которые принимают цельные иконки и занимают значительно меньше места в бандле. Цельные иконки под капотом состоят из гранулярных иконок

Какие иконки использовать?

У цельных иконок есть одно преимущество перед гранулярными иконками: при изменении размера, цельные иконки будут изменять своё начертание, гранулярные же иконки в свою очередь будут оставаться в своём начертании, но будут растягиваться до заданного размера

Проще всего увидеть эту разницу на примере. В примере обе иконки представлены в двух размерах: 64 пикселя и 32 пикселя. В цельной иконке, благодаря системе умного размера, при уменьшении иконки до 32-ух пикселей, изменяется её начертание. В гранулярной иконке, остаётся изначальное (64-ех пиксельное) начертание, но сама иконка уменьшается до 32-ух пикселей:

import { DivideCircleIcon, DivideCircleIcon64Regular } from './icons/DivideCircleIcon';

<div style={{ display: 'flex' }}>
  <div style={{ marginRight: '30px' }}>
    <div>Цельная иконка</div>
    <DivideCircleIcon size={64} />
    <DivideCircleIcon size={32} />
  </div>

  <div>
    <div>Гранулярная иконка</div>
    <DivideCircleIcon64Regular />
    <DivideCircleIcon64Regular size={32} />
  </div>
</div>;

Итого, использование гранулярных vs цельных иконок можно свести к трём правилам:

1. Если вам не нужна фишка цельных иконок с умным размером - используйте используйте гранулярные иконки
2. Если вам нужно менять размер иконок (например, в зависимости от размера экрана), но при этом вы не хотите чтобы ваш бандл разрастался - используйте гранулярные иконки со своей логикой, которая будет подменять иконки
3. Если вам нужно менять размер иконок и у вас нет возможности написать свою логику для определения размера иконки или если для вас не критичен размер бандла - используйте цельные иконки

Пропы иконок:

type IconProps = {
  size?: 16 | 20 | 24 | 32 | 64 | number; // Иконка может иметь любой размер, но будет внешне меняться в зависимости от брейкпоинтов. Так, если задать иконке размер `35`, то иконка размера `32` будет растянута до размера `35`, если задать иконке размер `100`, то иконка размера `64` будет растянута до размера `100`. Иконки размером меньше `16` будут использовать иконку размера `16` как базовую иконку.
  weight?: 'light' | 'regular' | 'solid'; // Стиль иконки в соответствии с дизайном.
  color?: string; // Цвет иконки. По умолчанию наследуется цвет ближайшего родителя, у которого явно задан аттрибут `color`.
  align?: 'center' | 'baseline' | 'none'; // Позволяет выровнять иконку относительно остального контента. При 'baseline' иконка будет выравниваться относительно базовой линии текста, при 'center' иконка будет выравниваться относительно центра текста или друго контента, при 'none' к иконке не будут применены дополнительные стили для выравнивания. Значение по умолчанию - 'center'.
} & React.SVGAttributes<SVGElement>; // Также иконка может принимать все атрибуты элемента `svg`.

Выстраивание иконок относительно текста

import { IconsInTextTemplate } from './__stories__/IconsInTextTemplate';
import { completeIcons } from './__stories__/constant';

<IconsInTextTemplate icons={completeIcons} />;

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

import { OldNewIconsCorrelation } from './__stories__/OldNewIconsCorrelation';

<OldNewIconsCorrelation />;

Шоу-кейс всех иконок

import { AllIconsTemplate } from './__stories__/AllIconsTemplate';
import { completeIcons } from './__stories__/constant';

<AllIconsTemplate icons={completeIcons} />;