Icon

Компонент SVG-іконки з вбудованим набором іконок.

Живе демо

Покупки та кошик

Товари та склад

Користувач і обліковий запис

Оплата

Стрілки — шеврони

Стрілки — прямі

Стрілки — довгі (з хвостиками)

Стрілки — подвійні та розгортання

Навігація та посилання

Зв'язок

Медіа — відтворення

Медіа — вміст

Документи

Елементи інтерфейсу

Соцмережі

Дії

Стан та інформація

Доставка

Інше

Власні розміри

Власні кольори

Використання

<template>
  <orio-icon name="edit" />
  <orio-icon name="check" :size="32" color="green" />
</template>

Доступні іконки

Стрілки — шеврони (кутові стрілки)

• chevron-up - Шеврон угору
• chevron-down - Шеврон униз
• chevron-left - Шеврон ліворуч
• chevron-right - Шеврон праворуч

Стрілки — прямі (прості трикутники)

• arrow-up - Проста стрілка вгору
• arrow-down - Проста стрілка вниз
• arrow-left - Проста стрілка ліворуч
• arrow-right - Проста стрілка праворуч

Стрілки — довгі (з хвостиками)

• arrow-back - Стрілка навігації назад
• arrow-forward - Стрілка навігації вперед
• arrow-upward - Стрілка навігації вгору
• arrow-downward - Стрілка навігації вниз

Стрілки — спеціальні

• double-arrow-left - Перемотування назад
• double-arrow-right - Перемотування вперед
• expand-more - Розгорнути/показати більше
• expand-less - Згорнути/показати менше

Навігація та посилання

• home - Головна сторінка
• menu - Меню-«гамбургер»
• filter - Параметри фільтра
• grid-view - Подання сіткою
• list-view - Подання списком
• link - Посилання/ланцюжок
• external-link - Зовнішнє посилання/відкрити в новій вкладці

Зв'язок

• mail - Email/конверт
• message - Повідомлення/SMS
• chat - Чат/розмова
• phone - Телефон/дзвінок

Медіа — відтворення

• play - Відтворити
• pause - Пауза
• stop - Зупинити
• skip-next - До наступного
• skip-previous - До попереднього

Медіа — вміст

• image - Зображення/фото
• video - Відео/камера
• camera - Камера/зробити фото
• mic - Мікрофон увімкнено
• mic-off - Мікрофон вимкнено
• volume - Гучність/звук увімкнено
• volume-off - Звук вимкнено

Документи

• file - Звичайний файл
• folder - Закрита тека
• folder-open - Відкрита тека
• document - Текстовий документ
• pdf - PDF-документ

Елементи інтерфейсу

• eye - Показати/видимий
• eye-off - Приховати/невидимий
• lock - Заблоковано/захищено
• unlock - Розблоковано/незахищено
• copy - Копіювати в буфер обміну

Соцмережі

• github - GitHub
• twitter - Twitter/X
• facebook - Facebook
• instagram - Instagram
• youtube - YouTube
• linkedin - LinkedIn

Покупки та кошик

• shopping-cart - Повний кошик з товарами
• shopping-bag - Сумка для покупок
• cart-plus - Додати в кошик
• cart-remove - Прибрати з кошика

Товари та склад

• tag - Цінник
• barcode - Штрихкод товару
• package - Посилка/коробка для доставки
• gift - Подарунок
• box - Коробка для зберігання/складу

Користувач і обліковий запис

• user - Профіль/обліковий запис
• heart - Обране/список бажань (заповнене)
• heart-outline - Обране/список бажань (контур)
• star - Зірка рейтингу (заповнена)
• star-outline - Зірка рейтингу (контур)

Оплата

• credit-card - Оплата карткою
• wallet - Цифровий гаманець
• receipt - Чек/рахунок замовлення

Дії

• edit - Редагувати/олівець
• check - Галочка
• plus - Плюс/додати
• close - Закрити/хрестик
• search - Пошук/лупа
• upload - Стрілка завантаження на сервер
• download - Стрілка завантаження
• delete - Видалити/кошик
• share - Поділитися товаром/посиланням
• refresh - Оновити/перезавантажити
• settings - Налаштування/параметри
• bell - Сповіщення
• compare - Порівняти товари
• discount - Знижки/розпродажі

Стан та інформація

• loading-loop - Анімований індикатор завантаження
• info - Інформація
• warning - Попередження
• check-circle - Підтвердження успіху
• error-circle - Стан помилки
• help - Допомога/підтримка

Доставка

• truck - Доставка
• location - Розташування магазину
• map-pin - Мітка на мапі

Інше

• calendar - Календар

Докладніше про додавання власних іконок — у Icon Registry.

Пропси

Проп	Тип	За замовчуванням	Опис
name	IconName | string	-	Назва іконки з реєстру
size	string | number	'1em'	Розмір іконки (px або em)
color	string	'currentColor'	Колір іконки (CSS-колір)