Icon

Отображает значок из файла, которому присвоен псевдоним в файле проекта Static.asset

Файл, содержащий значок, может иметь только SVG-формат. Размер значка предопределен и может быть указан с помощью одного из свойств компонента. Цвет значка определяется значением RGBA, HEX, константой или значением из палитры согласно дизайн-системе Платформы. На значке может быть указано значение счетчика.

<Icon 
  Name="person"  
  Color={"VIOLET_5"} 
  Counter="Не только цифры" 
  Size="ExtraLarge" 
  CSS={['m-8']} 
/>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
Counter	Счетчик: строка, содержащая число или текст	string
CustomHeight	Высота в пикселях (используется по умолчанию), процентах или значение auto	string	16px
CustomWidth	Ширина в пикселях (используется по умолчанию), процентах или значение auto	string	16px
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
HoveredColor	Цвет при наведении указателя мыши: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
Name	Псевдоним значка из файла Static.asset	string
NoResizeSVG	Признак использования SVG-изображения существующего размера; применяется для совместимости с версиями Платформы до v. 0.6	boolean	False
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
Size	Размер значка в пикселях	enum	Medium	`ExtraSmall` - 8x8 `Small` - 16x16 `Medium` - 24x24 `Large` - 32x32 `ExtraLarge` - 48x48 `Custom` - Произвольное значение из CustomWidth и CustomHeight
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Value	Устаревшее свойство. Используется для псевдонима значка, указания размера и управления отображением счетчика. Для указания размера используется ключ Size с одним из значений: ExtraSmall, Small, Medium, Large. По умолчанию используется размер Medium. Для задания цвета значка используется ключ Color. Для отображения счетчика используется ключ Counter, например, { name: 'person', counter: 2 }.	object
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

JSX:

<Group Mode="Column">
  /* устаревший пропс Value! */
  <Icon Value={{ name: 'menubar',}} Color={"VIOLET_5"} CSS={['m-8']} />
  <Icon Value={{ name: 'filter',}} Color={"ERROR_6"} CSS={['m-8']} />
  
  /*Новые пропсы Name Counter Size */
  <Icon Name="person" Counter="2" CSS={['m-8']} />
  <Icon Name="person" Counter="Не только цифры" Size="ExtraLarge" CSS={['m-8']} />
  
  /* Совместимость со старым отображением (SVG того размера, какой есть) */
  <Icon NoResizeSVG={true}  Value={{ name: 'filter'}} Counter="12" CSS={['m-8']} />
  
  /* новая возможность кастомного размера */
  <Icon 
    Name="person" 
    Size="Custom" 
    CustomHeight="100px" 
    CustomWidth="100px" 
    CSS={['m-8']} 
  />
  
  /* пример как сделать круглую иконку с помощью Group */
  <Group 
    CSS={['m-8']} 
    Align="Center" 
    VerticalAlign="Center" 
    Background="VIOLET_3" 
    HoveredBackground="VIOLET_5" 
    BorderRadius="100%" 
    Width="30px" 
    Height="30px"
    Cursor="Not-allowed"
  >
    <Icon 
      Name="person" 
      Color="VIOLET_5" 
      HoveredColor="VIOLET_3" 
    />
  </Group>
</Group>

Свойства​

Примеры​

Свойства

Примеры