Инструкция использования базовых иконок
Используемые классы
Настройки базовых иконок (.icon): Корзина, Избранное, Поиск, Личный кабинет. Работает как на элементах «shape», так и на «img»
.icon
Класс для работы маски
Пример использования 1:
icon, favourites, theme-accent, style-fill
Пример использования 2:
icon, basket, theme-light, style-outline
Иконки:
Обнови иконки ниже, они подтянутся на всём сайте автоматически.
.cart
Иконка корзина
.favourites
Иконка избранное
.search
Иконка поиск
.office
Иконка личный кабинет
Темы:
Не забудь добавить цветовую тему области иконки
.theme-brand
Фирменный цвет
.theme-white
Белая версия
.theme-light
Светлая версия
.theme-dark
Темная версия
.theme-accent
Акцентная версия
.theme-soft
Мягкая версия
.theme-blur
Размытая версия
Стили:
Выбери одну из существующих стилей
.style-fill
Область иконки с заливкой
.style-outline
Область иконки с обводкой
Визуализация корзины
В сочетании данного мода ссылка, на корзину автоматически навешивается счётчик кол-во и сумма товаров, а также имеется собственный root для настройки и расположения этих значений
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация избранного
В сочетании данного мода ссылка, на корзину автоматически навешивается счётчик кол-во и сумма товаров, а также имеется собственный root для настройки и расположения этих значений
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация поиска
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация личного кабинета
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Иконки стрелки
Используемые классы
Настройки стрелок (.icon-arrow): Стрелки в стороны. Работает как на элементах «shape», так и на «img»
.icon-arrow
Класс для работы маски
Пример использования 1:
icon-arrow, right-icon, theme-accent, style-fill
Пример использования 2:
icon-arrow, right-icon, theme-light, style-outline
Иконки основные:
Обнови иконки в библиотеке, они подтянутся на всём сайте автоматически.
.up-chevron
Иконка смотрит вверх
.right-chevron
Иконка смотрит вправо
.down-chevron
Иконка смотрит вниз
.left-chevron
Иконка смотрит влево
Темы:
Не забудь добавить цветовую тему области иконки
.theme-brand
Фирменный цвет
.theme-white
Белая версия
.theme-light
Светлая версия
.theme-dark
Темная версия
.theme-accent
Акцентная версия
.theme-soft
Мягкая версия
.theme-blur
Размытая версия
Стили:
Выбери одну из существующих стилей
.style-fill
Область иконки с заливкой
.style-outline
Область иконки с обводкой
Библиотека масок компонента стрелки
Обнови иконки ниже, они подтянутся на всём сайте автоматически без правок в коде.
.up
Иконка смотрит верх
.right
Иконка смотрит вправо
.down
Иконка смотрит вниз
.left
Иконка смотрит влево
.up-left
Смотрит вверх и влево
.up-right
Смотрит вверх и вправо
.downt-right
Смотрит вниз и вправо
.downt-left
Смотрит вниз и влево
.up-to-line
Иконка смотрит влево
.right-to-line
Иконка смотрит вниз
.down-to-line
Иконка смотрит вправо
.left-to-line
Иконка смотрит верх
.up-from-line
Смотрит вниз и вправо
.right-from-line
Смотрит вниз и влево
.down-from-line
Смотрит вверх и влево
.left-from-line
Смотрит вверх и вправо
.up-chevron
Иконка смотрит верх
.right-chevron
Иконка смотрит вправо
.down-chevron
Иконка смотрит вниз
.left-chevron
Иконка смотрит влево
.up-chevrons
Иконка смотрит верх
.right-chevrons
Иконка смотрит вправо
.down-chevrons
Иконка смотрит вниз
.left-chevrons
Иконка смотрит влево
Визуализация стрелок вверх
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация стрелок вправо
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация стрелок вниз
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Визуализация стрелок влево
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Иконки медиа
Используемые классы
Настройки медийных иконок (.icon-soc): Социальные сети, хостинги и другое. Работает как на элементах «shape», так и на «img»
.icon-soc
Класс для работы маски
Пример использования 1:
icon-soc, vk, theme-accent, style-fill
Пример использования 2:
icon-soc, tg, theme-light, style-outline
Иконки основные:
Обнови иконки в библиотеке, они подтянутся на всём сайте автоматически.
.vk
Vkontakte
.tg
Ttelegram
.max
Max
.ok
Однокласники
Темы:
Не забудь добавить цветовую тему области иконки
.theme-brand
Фирменный цвет
.theme-white
Белая версия
.theme-light
Светлая версия
.theme-dark
Темная версия
.theme-accent
Акцентная версия
.theme-soft
Мягкая версия
.theme-blur
Размытая версия
Стили:
Выбери одну из существующих стилей
.style-fill
Область иконки с заливкой
.style-outline
Область иконки с обводкой
Библиотека масок компонента медиа - Мессенджеры и соцсети
Обнови иконки ниже, они подтянутся на всём сайте автоматически без правок в коде.
.vk
#0077FF
.tg
#419FD9
.max
gradient
.ok
#EE8208
.whatsapp
Смотрит вверх и влево
.instagram
gradient
.threads
#000
.viber
#8c60c3
.meta
Иконка смотрит влево
.x
#000
.rutube
#100943
.youtube
#FF0033
.twitch
#9146FF
.tiktok
#000
.linkedin
#006699
.pinterest
#E60023
.behance
#1769FF
.dribbble
#EA4C89
.dprofile
#000
Визуализация соц сетей
Тема: brand
style-fill
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: brand
style-outline
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Иконки хлебные крошки
Используемые классы
Настройки иконок для хлеб крошек (.icon-bread): Варианты разделителей и домашней страницы. Работает как на элементах «shape», так и на «img»
.icon-bread
Класс для работы маски
Пример использования 1:
icon-bread, arrow, theme-accent, style-fill
Пример использования 2:
icon-bread, slash, theme-light, style-outline
Иконки основные:
Обнови иконки в библиотеке, они подтянутся на всём сайте автоматически.
.arrow
Стрелка
.chevron
Стрелка шеврон
.chevrons
Двойная стрелка шеврон
.slash
slash под наклоном
Темы:
Не забудь добавить цветовую тему области иконки
.theme-brand
Фирменный цвет
.theme-white
Белая версия
.theme-light
Светлая версия
.theme-dark
Темная версия
.theme-accent
Акцентная версия
.theme-soft
Мягкая версия
.theme-blur
Размытая версия
Стили:
Выбери одну из существующих стилей
.style-fill
Область иконки с заливкой
.style-outline
Область иконки с обводкой
Библиотека масок компонента хлебные крошки
Обнови иконки ниже, они подтянутся на всём сайте автоматически без правок в коде.
.home
Домой
.arrow
Стрелка
.chevron
Шеврон
.chevrons
Двойной шеврон
.slash
slash наклон
Визуализация хлебных крошек
Иконки индивидуальные
Используемые классы
Настройки своих иконок в zero (.icon-nameless): Любая иконка без библиотеки. Работает как на элементах «shape», так и на «img»
.icon-nameless
Класс для работы маски
Пример использования 1:
icon-nameless, theme-accent, style-fill
Пример использования 2:
icon-nameless, theme-light, style-outline
Иконки основные:
Обнови иконки в библиотеке, они подтянутся на всём сайте автоматически.
Иконку загрузите прямиком в shape или img
Иконку загрузите прямиком в shape или img
Темы:
Не забудь добавить цветовую тему области иконки
.theme-brand
Фирменный цвет
.theme-white
Белая версия
.theme-light
Светлая версия
.theme-dark
Темная версия
.theme-accent
Акцентная версия
.theme-soft
Мягкая версия
.theme-blur
Размытая версия
Стили:
Выбери одну из существующих стилей
.style-fill
Область иконки с заливкой
.style-outline
Область иконки с обводкой
.data-атрибут
Полная кастомизация через атрибуты
Настройка дата атрибутов - Контейнер и геометрия
Подробная инструкция как использовать и кастомизировать значения через data-атрибуты:
Название атрибута:
Описание:
Принимаемые значения:
Пример настройки:
data-bg
data-hover-bg
- Цвет или градиент фона контейнера
- Фон контейнера при наведении
- Global root: (primary-700, light-200)
- HEX (#fff, #0077FF),
- RGBA (255, 255, 255, 0.7),
- Переменные (--custom-color, var(...))
- Ключевые слова (transparent).
- data-bg: primary-700 или другое значение
- data-bg: #fff или другое значение
- data-bg: 255, 255, 255, 0.7 или другое значение
- data-bg: --custom-color, var(primary-700)
- data-bg: transparent
data-border
data-hover-border
- Параметры рамки / обводки
- Обводка при наведении
Толщина, тип и цвет (например, 1px solid primary-300, 2px solid #fff, none).
- data-border: 1px solid primary-300
- data-hover-border: 2px solid #fff
data-radius
data-hover-radius
- Радиус скругления углов
- Скругление при наведении
Пиксели или проценты (10px, 12px, 50%).
- data-radius: 12px
- data-hover-radius: 12%
data-opacity
data-hover-opacity
- Прозрачность контейнера
- Прозрачность контейнера при наведении
Дроби от 0 до 1 (0.6) либо целые проценты от 2 до 100 (60, 80 — код автоматически разделит их на 100).
- data-opacity: 0.6
- data-opacity: 50%
- data-opacity: 50 (без знака также понимает)
- data-opacity: 1 (=100%)
data-shadow
data-hover-shadow
- Тень контейнера
- Тень контейнера при наведении
Стандартный синтаксис CSS box-shadow (0 4px 12px rgba(0,0,0,0.1), none).
- data-shadow: 0 4px 12px rgba(0,0,0,0.1)
- data-shadow: none
- data-shadow: в разработке root
data-translate-y
data-hover-translate-y
- Сдвиг контейнера по вертикали
- Сдвиг контейнера по вертикали при наведении
Число с единицами (-5px, 0px) или просто число (-5, 0) — код сам добавит px и обернет в translateY(...).
- data-translate-y: -5px (вверх)
- data-translate-y: 5px (вниз)
- data-hover-translate-y: -5
- data-hover-translate-y: 5
data-scale
data-hover-scale
- Масштаб контейнера
- Масштаб контейнера при наведении
Число (1, 1.05, 1.1) — код автоматически обернет его в scale (…).
- data-scale: 1.1
- data-hover-scale: 1.5
Настройка дата атрибутов - Векторная SVG-маска иконки
Подробная инструкция как использовать и кастомизировать значения через data-атрибуты:
Название атрибута:
Описание:
Принимаемые значения:
Пример настройки:
data-icon-size
data-hover-icon-size
- Размер иконки внутри контейнера
- Размер иконки при наведении
Проценты или пиксели (50%, 60%, 24px).
- data-icon-size: 75% (гибкое решение)
- data-icon-size: 32px (не рекомендую)
- data-hover-icon-size: 85% (иконка увеличится внутри контейнера)
- data-hover-icon-size 40px (иконка увеличится внутри контейнера)
data-icon-color
data-hover-icon-color
- Цвет заливки иконки
- Цвет заливки иконки
- Global root: (primary-700, light-200)
- HEX (#fff, #0077FF),
- RGBA (255, 255, 255, 0.7),
- Переменные (--custom-color, var(...))
- Ключевые слова (transparent).
- data-icon-color: primary-700
- data-icon-color: #fff
- data-icon-color: 255, 255, 255, 0.7
- data-icon-color: --custom-color, var(primary-700)
- data-icon-color: transparent
data-hover-icon-scale
- Масштаб самой иконки при наведении
Число (1.1, 1.2 — код превратит в scale(1.2)).
- data-hover-icon-scale: 1.2 (увеличение)
- data-hover-icon-scale: 0.8 (уменьшение)
data-hover-icon-rotate
- Угол поворота иконки при наведении
Число с градусами (45deg, -90deg) или просто число (45, 90 — код сам добавит deg и обернет в rotate(...)).
- data-hover-icon-rotate: 45deg
- data-hover-icon-rotate: 45
- data-hover-icon-rotate: -45deg
- data-hover-icon-rotate: -45
Визуализация индивидуальных иконок
Тема: light
style-fill
Тема: dark
style-fill
Тема: accent
style-fill
Тема: soft
style-fill
Тема: white
style-fill
Тема: blur
style-fill
Тема: light
style-outline
Тема: dark
style-outline
Тема: accent
style-outline
Тема: soft
style-outline
Тема: white
style-outline
Тема: blur
style-outline
Атрибуты
Атрибуты
