Создание дизайн-системы. Часть 5. Иконки | В паутине

Создание дизайн-системы. Часть 5. Иконки

Интеграция иконок в дизайн-систему

Есть несколько способов использования иконок. Для нашей дизайн-системы мы выбрали SVG. Векторная графика проста в использовании и дает широкий простор для настройки.

Тонкости работы с SVG мы разбирать не будем. Если вы хотите познакомиться с этой темой поближе, загляните в это руководство по внедрению иконок в дизайн-систему. Тут вы найдете много полезной информации.

Примечание: в статье будут использоваться только SVG-символы (Symbols). Но весь CSS-код, включая классы, легко можно применить и к инлайновым SVG-элементам, и к иконочным шрифтам.

Первым делом импортируем нужные символы в начале страницы, сразу после тега body.

Здесь используется синтаксис шаблонизатора Nunjucks. Вы можете использовать ваш любимый шаблонизатор или же напрямую включить в страницу полный SVG-код.

Класс .icon отвечает за базовый стиль:

Он устанавливает способ отображения и размеры для всех иконок.

Примечание: если вы используете иконочный шрифт, обязательно добавьте в класс .icon свойство font-family с правильным значением (например, font-family: MyIconFont).

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

По умолчанию длина и ширина иконки равны 1em – эти значения определены в классе .icon. Для изменения размеров мы создадим несколько вспомогательных классов:

Так как свойства width и height заданы в относительных единицах em, они сразу же реагируют на изменение размера шрифта (1em = текущий размер шрифта элемента).

А для иконок будем использовать абсолютные единицы – пиксели, чтобы они не зависели от размеров вьюпорта и медиа-запросов.

Иконки разного стиля

Для цвета иконок используем CSS-переменные:

Примечание: работа с цветами описывалась в третьей части серии, а все переменные включены в отдельный файл _colors.scss. Таким образом, их можно удобно использовать для иконок.

Переменная --color-icon-primary будет определять цвет иконок по умолчанию на светлом фоне.

Для компонентов с классом .theme--dark и темным фоном ее значение можно изменять, как и значения других переменных.

Идея состоит в том, что при модификации стилей мы не используем непосредственно класс .icon (или другие классы элементов, зависящие от темы). Вместо этого мы храним все значения цветов в отдельном месте (внутри класса .theme--dark). Это позволяет удобно управлять состоянием компонентов в разных темах, просто добавляя или удаляя класс.

Выравнивание иконок в тексте

По умолчанию иконки имеют размер в 1em – то есть они равны тексту, среди которого находятся. Но для адекватного выравнивания этого недостаточно, поэтому мы воспользуемся flexbox-свойствами.

Создадим класс для выравнивания, который нужно будет добавить к контейнеру, содержащему текст с иконками.

Свойство align-items отцентрирует всех потомков контейнера по оси y. Кроме того, для иконки устанавливается цвет, зависящий от цвета текста контейнера.

А вот живой пример использования и кастомизации иконок:

See the Pen SVG Icons in a design system by Claudia (@claudiar) on CodePen.

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны