Новые иконки Gridicons от Automattic

Опубликовано: 02.09.2018

Дизайнер в компании Automattic Дейв Уитли объявил на сайте Dribbble о доступности нового пакета иконок Gridicons. Это новые векторные иконки, используемые в проекте Calypso от WordPress.com.

Набор векторных иконок Gridicons

Сейчас проект насчитывает более 140 иконок в векторном формате. Использовать их можно в любых целях согласно лицензии GPL, но в отличие от предыдущего набора от Automattic Genericons , иконки Gridicons предназначены для отображения в веб-приложениях при помощи тега <svg>, например:


11 неизвестных фич WordPress — uWebDesign подкаст #75

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <rect x="0" fill="none" width="24" height="24"/><g><path d="M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z"/></g> </svg>

Такой подход немного сложнее, чем использование CSS классов, но он имеет определенные плюсы. Например вместо полного пакета из всех доступных иконок, браузер будет загружать только те иконки, которые используются на конкретной странице. Также подобный набор легко расширять новыми иконками не беспокоясь об обратной совместимости или о размере «дистрибутива» с иконками.

Изменять цвет и размер иконок можно как атрибутами в HTML коде:

<svg height="50" width="50" fill="red" class="wpmag-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <rect x="0" fill="none" width="24" height="24"/><g><path d="M18 9c-.01 0-.017.002-.025.003C17.72 5.646 14.922 3 11.5 3 7.91 3 5 5.91 5 9.5c0 .524.07 1.03.186 1.52C5.123 11.015 5.064 11 5 11c-2.21 0-4 1.79-4 4 0 1.202.54 2.267 1.38 3h18.593C22.196 17.09 23 15.643 23 14c0-2.76-2.24-5-5-5z"/></g> </svg>

Или при помощи CSS:

svg.wpmag-icon { width: 50px; height: 50px; fill: blue; }

Напоминаем вам, что SVG поддерживается в большинстве современных браузерах (кроме IE8 и ниже). Подробную таблицу поддержки можно найти на сайте caniuse.com .

Пакет Gridicons распространяется бесплатно под лицензией GPL и доступен на сайте GitHub .

Скомпилированные иконки для веб можно найти в директории svg-min, а в директории svg-sprite есть файл index.html с сеткой из всех доступных иконок. Учтите, что в этом файле используется метод внедрения SVG при помощи тега <use>, который на данный момент вообще не поддерживается браузерами IE.

Если вы хотите включить в набор собственную иконку или улучшить существующую, дизайнеры Automattic с удовольствием рассмотрят ваши предложения на GitHub.

Gridicons на GitHub

rss