@snack-uikit/icon-predefined

Icon Predefined

Installation

npm i @snack-uikit/icon-predefined

Changelog

Description

• Компонент IconPredefined оборачивает SVG-иконки из пакета @snack-uikit/icons и применяет к ним предустановленное стилевое оформление.
• Позволяет отображать иконки с единообразным внешним видом: задаёт цвет иконки через проп appearance (primary, neutral, red, orange, yellow, green, blue, violet, pink), размер через size (s, m, l) и форму контейнера через shape (round, square).
• Поддерживает опциональную цветную подложку (decor), которая создаёт визуальный акцент и улучшает читаемость иконки на фоне.
• Компонент автоматически передаёт необходимые атрибуты (размер, внешний вид) во вложенную иконку для корректного отображения.
• Figma: Icon Predefined.

Example

import { HeartSVG } from '@snack-uikit/icons';
import { IconPredefined } from '@snack-uikit/icon-predefined';

function Example() {
  return (
    <IconPredefined
      appearance="red"
      size="l"
      icon={HeartSVG}
      decor
      shape="round"
    />
  );
}

IconPredefined

Props