Как работать с иконками

Иконки поставляются отдельным пакетом @salutejs/plasma-icons и используются как обычные React-компоненты.

Установка​

npm install --save @salutejs/plasma-icons

Импорт иконок​

Для иконок по возможности используйте размерные точки входа: @salutejs/plasma-icons/16, @salutejs/plasma-icons/24 или @salutejs/plasma-icons/36. Так в итоговый бандл попадут только импортированные компоненты.

Однако если иконка не представлена во всех размерах, то ее можно импортировать стандартным способом напрямую из @salutejs/plasma-icons.

Live Editor
Result
Open in CodeSandbox

Размерная точка входа задает базовый SVG-ассет:

  • @salutejs/plasma-icons/16 - иконки с базовым размером 16px;
  • @salutejs/plasma-icons/24 - иконки с базовым размером 24px;
  • @salutejs/plasma-icons/36 - иконки с базовым размером 36px.

Размер​

Иконки поддерживают свойство size:

  • xs - 16px;
  • s - 24px;
  • m - 36px.
Live Editor
Result
Open in CodeSandbox

Если иконка импортирована из размерной точки входа, у нее уже есть размер по умолчанию: xs для 16, s для 24, m для 36.

Цвет​

Цвет задается свойством color. По умолчанию используется var(--plasma-colors-primary). В color можно передать CSS-переменную, currentColor, inherit, обычный цвет или CSS-градиент.

Live Editor
Result
Open in CodeSandbox

Классы и стили​

Иконкам можно передавать className и style. Это удобно, если нужно настроить отступы, выравнивание или анимацию.

import { IconSearch } from '@salutejs/plasma-icons/24';

export const SearchIcon = () => (
    <IconSearch
        className="search-icon"
        style={{ marginRight: '0.5rem' }}
    />
);

Задание пользовательского размера иконки​

Если стандартные размеры (xs, s, m) не подходят, задайте размер иконки напрямую через style:

Live Editor
Result
Open in CodeSandbox

Это удобно при встраивании иконки в компоненты, где размер определяется родительским контейнером, а не дизайн-токеном.

danger

В пакете есть переиспользуемый компонент Icon, которому можно передать имя иконки:

import { Icon } from '@salutejs/plasma-icons';

export const AppsIcon = () => <Icon icon="iconApps" />;

Такой способ не рекомендуется для пользовательского интерфейса: при сборке в бандл могут попасть все иконки. Используйте прямой импорт конкретного компонента.