Приклади використання

Дослідіть різні варіанти налаштувань компонента Icon для створення унікальних візуальних ефектів у вашому проєкті.

Оригінальні кольори

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="original"
/>
Параметри

Сіра (Grayscale) іконка

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="rocket"
  size={154}
  variant="grey"
/>
Параметри

Однотонна іконка

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="solid"
  color="#ec4899"
/>
Параметри

Горизонтальний градієнт

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientDirection="horizontal"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
/>
Параметри

Вертикальний градієнт

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientDirection="vertical"
  colorFirst="#8b5cf6"
  colorSecond="#ec4899"
/>
Параметри

Радіальний градієнт

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientType="radial"
  colorFirst="#ff4500"
  colorSecond="#ffcc00"
/>
Параметри

Діамантовий градієнт

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  gradientType="diamond"
  colorFirst="#ff00ff"
  colorSecond="#ce9ed8"
/>
Параметри

Анімовані іконки

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
  animate={true}
  animationDuration={15}
  animationColors={[
    "#3B82F6",
    "#9911ac",
    "#3B82F6",
    "#9911ac"
  ]}
/>
Параметри

Кольорові іконки

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="home-colored"
  size={48}
  variant="original"
/>
Параметри

Прозорість (opacity prop)

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="heart-gradient"
  size={48}
  variant="gradient"
  colorFirst="#8b5cf6"
  colorSecond="#ec4899"
  opacity={0.5}
/>
Параметри

Багатокольорові іконки

Оригінальна іконка
Згенерована іконка
React TSX
<Icon
  name="surf"
  size={154}
  variant="multicolor"
  color1="#00E5FF"
  color2="#FF4081"
  color3="#7C4DFF"
  color4="yellow"
  color5="#FF4081"
  color6="#7C4DFF"
  color7="purple"
  color8="#FF4081"
/>
Параметри