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

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

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

Есть несколько способов использования иконок. Для нашей дизайн-системы мы выбрали 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)

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