SVG Иконки

Все иконки

IconHome

Иконка дома

IconSearch

Иконка поиска

IconHeart

Иконка сердца

IconUser

Иконка пользователя

IconSettings

Иконка настроек

IconMenu

Иконка меню

IconClose

Иконка закрытия

IconArrowRight

Стрелка вправо

IconArrowLeft

Стрелка влево

IconArrowUp

Стрелка вверх

IconArrowDown

Стрелка вниз

IconPhone

Иконка телефона

IconMail

Иконка почты

IconMapPin

Метка на карте

IconStar

Иконка звезды

IconCalendar

Иконка календаря

IconClock

Иконка часов

Размеры иконок

16px

24px (по умолчанию)

32px

48px

64px

Цвета иконок

Primary

Secondary

White

Black

Универсальный компонент Icon

Использование по имени:

С параметрами:

Интерактивное демо

Выберите иконку:

Размер:

Цвет:

Использование в коде

Универсальный компонент

<Icon name="home" />
<Icon name="search" />
<Icon name="heart" />

С параметрами

<Icon name="home" :size="32" color="primary" />
<Icon name="search" :size="48" color="white" />
<Icon name="heart" :size="24" color="secondary" />

Прямой импорт

<IconHome :size="32" color="primary" />
<IconSearch :size="48" color="white" />
<IconHeart :size="24" color="secondary" />

В кнопке

<button class="btn">
  <Icon name="search" :size="16" />
  Поиск
</button>

Спецификации

Props

size - размер иконки (по умолчанию: 24)
color - цвет иконки (primary, secondary, white, black)

Размеры

16px - маленькие иконки
24px - стандартные иконки
32px - средние иконки
48px - большие иконки
64px - очень большие иконки

Цвета

primary - основной цвет темы
secondary - вторичный цвет
white - белый цвет
black - черный цвет