Дизайнер в компании Automattic Дейв Уитли объявил на сайте Dribbble о доступности нового пакета иконок Gridicons. Это новые векторные иконки, используемые в проекте Calypso от WordPress.com.
Набор векторных иконок Gridicons
Сейчас проект насчитывает более 140 иконок в векторном формате. Использовать их можно в любых целях согласно лицензии GPL, но в отличие от предыдущего набора от Automattic Genericons, иконки Gridicons предназначены для отображения в веб-приложениях при помощи тега <svg>, например:
<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.
