Figma

TextWithIcon

import { TextWithIcon } from '@megafon/ui-shared';

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

<TextWithIcon>
  <TextWithIconItem
      text={['Привлечение новых клиентов и повышение лояльности действующих']}
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

Заголовок

<TextWithIcon title="Преимущества">
  <TextWithIconItem
      text="Привлечение новых клиентов и повышение лояльности действующих"
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

Без ограничения по ширине

<TextWithIcon title="Преимущества" isFullWidth>
  <TextWithIconItem
      text="Привлечение новых клиентов и повышение лояльности действующих"
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

TextWithIconItem

import { TextWithIconItem } from '@megafon/ui-shared';

Фон для иконки

Для фона со значением no нужно использовать иконки размера L (фактический размер на странице должен быть 40px или 100%)

Для фона со значениями stroke или gray нужно использовать иконки размера M (фактический размер на странице должен быть 32px или 100%)

<TextWithIcon>
  <TextWithIconItem
      iconBackground="no"
      text={['Привлечение новых клиентов и повышение лояльности действующих']}
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      iconBackground="stroke"
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeM style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      iconBackground="gray"
      text="Понятная и простая реализация партнерстваих"
      icon={<StarSizeM style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

HTML-теги и спецсимволы

В свойстве text поддерживаются некоторые HTML-теги: "<br>, <b>, <font color>, <a href>" и спецсимвол &nbsp.
<TextWithIcon>
  <TextWithIconItem
      text="Описание&nbspдолжно <a href='https://moscow.megafon.ru'>быть</a> <font color='#731982'>примерно</font> не более <b>130</b> символов.<br>Пишите содержательно, кратко и не будет проблем с текстовым контентом."
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>