ГлавнаяРазноеНовые иконки Gridicons от Automattic

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

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

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

Набор векторных иконок 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.

Gridicons на GitHub

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Vitaliy Ralle

    Марина, за иконки спасибо. До кучи:
    Размеры подгружаемых библиотек: https://icomoon.io/#post/429
    Разметка для SVG: http://codepen.io/Keyamoon/pen/vEXLQX
    Стоит обратить внимание, что для заливки используется привычный color, что несколько облегчает жизнь
    Некоторые сложности с загрузкой внешнего файла SVG: https://github.com/Keyamoon/svgxuse

  • разнообразие — это хорошо. а то Font Awesome повсеместный уже поднадоел :)