Интеграция иконок в дизайн-систему
Есть несколько способов использования иконок. Для нашей дизайн-системы мы выбрали SVG. Векторная графика проста в использовании и дает широкий простор для настройки.
Тонкости работы с SVG мы разбирать не будем. Если вы хотите познакомиться с этой темой поближе, загляните в это руководство по внедрению иконок в дизайн-систему. Тут вы найдете много полезной информации.
Примечание: в статье будут использоваться только SVG-символы (Symbols). Но весь CSS-код, включая классы, легко можно применить и к инлайновым SVG-элементам, и к иконочным шрифтам.
Первым делом импортируем нужные символы в начале страницы, сразу после тега body.
<body>
{% include "icons.svg" %}
<svg class="icon">
<use href="#icon-rugby" xlink:href= "#icon-rugby"/>
</svg>
</body>Здесь используется синтаксис шаблонизатора Nunjucks. Вы можете использовать ваш любимый шаблонизатор или же напрямую включить в страницу полный SVG-код.
Класс .icon отвечает за базовый стиль:
.icon {
display: inline-block;
color: var(--color-icon-primary);
height: 1em;
width: 1em;
line-height: 1;
}Он устанавливает способ отображения и размеры для всех иконок.
Примечание: если вы используете иконочный шрифт, обязательно добавьте в класс .icon свойство font-family с правильным значением (например, font-family: MyIconFont).
Размеры иконок
По умолчанию длина и ширина иконки равны 1em – эти значения определены в классе .icon. Для изменения размеров мы создадим несколько вспомогательных классов:
:root {
--icon-xs: 16px;
--icon-sm: 24px;
--icon-md: 32px;
--icon-lg: 48px;
--icon-xl: 64px;
}
/* icon size */
.icon--xs {
font-size: var(--icon-xs);
}
.icon--sm {
font-size: var(--icon-sm);
}
.icon--md {
font-size: var(--icon-md);
}
.icon--lg {
font-size: var(--icon-lg);
}
.icon--xl {
font-size: var(--icon-xl);
}Так как свойства width и height заданы в относительных единицах em, они сразу же реагируют на изменение размера шрифта (1em = текущий размер шрифта элемента).
А для иконок будем использовать абсолютные единицы – пиксели, чтобы они не зависели от размеров вьюпорта и медиа-запросов.
Иконки разного стиля
Для цвета иконок используем CSS-переменные:
.icon {
color: var(--color-icon-primary);
}Примечание: работа с цветами описывалась в третьей части серии, а все переменные включены в отдельный файл _colors.scss. Таким образом, их можно удобно использовать для иконок.
Переменная --color-icon-primary будет определять цвет иконок по умолчанию на светлом фоне.
Для компонентов с классом .theme--dark и темным фоном ее значение можно изменять, как и значения других переменных.
@supports(--css: variables) {
.theme--dark {
--component-background: var(--black);
--color-text: var(--gray-4);
--color-icon-primary: #fff;
//..другие переменные, изменяющиеся в темной теме
}
}Идея состоит в том, что при модификации стилей мы не используем непосредственно класс .icon (или другие классы элементов, зависящие от темы). Вместо этого мы храним все значения цветов в отдельном месте (внутри класса .theme--dark). Это позволяет удобно управлять состоянием компонентов в разных темах, просто добавляя или удаляя класс.
Выравнивание иконок в тексте
По умолчанию иконки имеют размер в 1em – то есть они равны тексту, среди которого находятся. Но для адекватного выравнивания этого недостаточно, поэтому мы воспользуемся flexbox-свойствами.
Создадим класс для выравнивания, который нужно будет добавить к контейнеру, содержащему текст с иконками.
.icon-text-aligner {
display: flex;
align-items: center;
> *:nth-child(2) {
margin-left: var(--space-xxs);
}
.icon {
color: inherit;
flex-shrink: 0;
}
}Свойство align-items отцентрирует всех потомков контейнера по оси y. Кроме того, для иконки устанавливается цвет, зависящий от цвета текста контейнера.
<p class="icon-text-aligner">
<svg class="icon">
<use href="#icon-dog" xlink:href="#icon-dog"/>
</svg>
<em>This is some text here</em>
</p>А вот живой пример использования и кастомизации иконок:
See the Pen SVG Icons in a design system by Claudia (@claudiar) on CodePen.
0 комментариев