Москва не сразу строилась, да и у наших иконок долгая история.

Ни для кого не секрет, надеюсь, что это нормальная практика нарабатывать опыт и работы в области коддинга, дизайна и других областях сферы IT связанные с интеллектуальной собственностью. В определенный отрезок времени это даже стало приятным бонусом при приеме на работу. Когда у тебя были свои куски кода, элементы дизайна или другая приблуда ускоряющая погружение и развитие в данной сфере, это могло стать если не решающим фактором, то одним из важных.

После — на фоне появлений библиотек типа jQuery, а много позже Bootstrap и FontAwesome острая необходимость в таких штуках поотпала. Но взамен мы получили потерю уникальности веб-продуктов. Жесткую и агрессивную, я тоже этим грешил и продолжаю. Иногда.

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

Касаемо того же бутстрапа, честно, не скажу точно с какого момента, есть возможность собрать проект под себя, чем на данный момент мы с удовольствием пользуемся, собирая проекты на Gulp. Просто импортируем необходимые нам компоненты, перезаписываем данные переменных (даже не используем custom.scss для перезаписи стилей).

Даже когда я начал рисовать свои иконки для разных крупных проектов из-за отсутствия времени, которое предоставлялось работодателем, приходилось использовать тот же FA, потому что он уже есть и вроде бы все на месте. Поэтому было как-то так:

1. Я рисовал макет
2. Начинал тогда еще нарезать иконки или делать спрайты, но все обрывалось почти не начавшись
3. Пихал FA для «кроссбраузерности» и скорости

И проект, возможно так бы и остался проектом нарисованным, но недавно мы открыли маркет, и как нельзя кстати FA #5 стал условно бесплатным, что сподвигло нас вывести свой проект в свет.

Как я уже говорил, начиналась история иконок с рисования их для разных проектов. Самым первым, в котором проявление было прям очевидное — редизайн сайта OsbornRus . Тогда точно я нарисовал иконку сравнения товаров — rege-compare. И на данный момент она осталась почти неизменной. Став, в кой-то мере эталоном для остальных.

Сейчас, спустя приличное время, я взялся за эти иконки. Сперва я выложил их в формате ai просто на сайт . А затем началось самое интересное: я начал проект Vivaldo — музыкальный плеер и по совместимости дизайн сайта для исполнителя.

К слову, проект OsbornRus, к сожалению, так и не увидел на данный момент свет. Сайт делался на битрикс, завис, завял и вроде бы умер. Нет, вру, спустя года два он увидел свет.

Вернемся к действительности, в проекте Vivaldo я работал одновременно не над 1-м проектом, а сразу над четырьмя.

Это:

1. Сам Vivaldo
2. FA-Kit — аналог Bootstrap, но более легковесный
3. PH-Kit — в данном проекте используется мало, так как мы отошли от основы, а основа это затравка на WP темы
4. Icons Rage — бесплатный набор иконок, герой этой статьи

Начал я просто, нарисовав несколько иконок, которые использовал из проекта в проект. Их было всего несколько штук и они имели мало общего с нормальными профессиональными иконками. Среди них были такие иконки, как:

1. Стрелки во все четыре стороны
2. Шевроны в стороны
3. Иконки сравнения для магазина
4. Иконка корзинки
5. И еще несколько рабочих штук

Иногда они дополнялись, но системы не имели. В крайних случаях спасали иконки с flaticon.

В общем я их рисовал, снова рисовал и перерисовывал.

Пока я искал информацию о том, как же правильно рисовать эти чертовы иконки, я не находил ничего толкового. К сожалению, вынужден признать, что дизайнеры, которые рисуют круто — лишены системы: чистые эмоции. Это может быть и круто, но вот лично я — человек, которые все старается подвергнуть системе.

И тут вуаля, я нашел систему.

Признаюсь честно, я, когда нахожу новую методику, сперва не подвергаю ее сомнению (если там нет очевидной дряни), пробую и осознаю.

В данном случае я пришел к следующему:

И данная система, хочу отметить, имеет место быть. Хотя на момент написания статьи я так и не открыл истинной сути именно этой сетки. Скорее всего мы раскроем ее позже, так как на данный момент мы не планируем останавливаться в создании иконок. Или создадим свою.

К плюсам иконок сетки можно отнести:

1. Легкость построения
2. Масштабируемость
3. Хоть какая-то система

К минусам:

1. Сетка не панацея, когда создаешь иконочный шрифт
2. Желательно понимать, что ты делаешь

То, что мы опишем далее не рекомендуем воспринимать как беспрекословное описание действий, а лишь как наш опыт.

Чтобы корректно отобразить нарисованные иконки вам необходимо придерживаться следующих рекомендаций:

1. Вам придется либо подгонять иконки под ширину области, либо подгонять ширину области под иконку
2. Для экспорта рисуйте иконки минимум 500 на 500 пикселей
   На экспорте вам придется либо оптимизировать иконку, что может ее исказить
3. Если вы рисуете иконки в стиле lineart, то масштабировать под размер не составит труда, почти.
   Когда я рисовал иконки под масштаб 600 на 600, то некоторые, у которых внутренняя обводка, я масштабировал до высоты в 500px (в некоторых случаях на всю высоту), а с обводкой стандартной «в середине» на 500px — ширина обводки (в нашем случае — 35px). С полностью наружной обводкой соответственно — 2 ширины обводки т.е. 70px. Подгоняйте элементы по логике вещей, например chevron скорее всего должен быть меньше, чем элемент списка, но не обязательно. Позже это можно поправить в стилях.
4. Перед экспортом разбирайте обводку и вообще оформление, и собирайте контур в один неразрывный.

А теперь самое главное: инфа сотка, что первый раз, когда вы будете делать иконочный шрифт выйдет чушь. Полная. Хоть глаза закрывай. И выкалывай.

Так было и у меня, проблемными областями стали dashboard и шевроны со стрелками. Они становились шире, чем все остальным области.

Существует не один сервис для создания иконочного шрифта, такие как iconmoon, но пусть и шрифт у нас вроде бы opensource, но раскидываться им в мутках, как предлагает сервис, я не захотел. Разбираться даже не стал, но как увидел намек, что он [шрифт] может стать достоянием общественности, развернулся и ушел.

Несомненно путь который выбрал я тяжелее, на том же iconmoon присутствует тонна утилит для настройки каждой иконки индивидуально, а тут, с использованием task runner-ов ты сталкиваешься с тем, что ты должен изначально правильно все рассчитать.

Но оно и к лучшему, как я указывал выше — квесты с расчетом это самое то, что надо.

А теперь об экспорте. В качестве основного инструмента я выбрал gulp с надстройками:

1. Gulp icon-font
   Содержит в себе еще пачку задач обрабатывающих svg иконки, можно реализовать все чисто на них, но это не основная наша задача, поэтому может быть в другой раз
2. Gulp svg-sprites
   В противоположность шрифту есть svg спрайты, а лучше символы. Их можно призывать волшебным use, который творит магию. И прорисовывается лучше шрифта.

Как мы уже указали, необходимо либо подгонять ширину области, либо выбрать некоторые кратности, под которые надо подгонять иконки, например у вас будет высота 500px, а ширина 500, 450, 175, где под ширину вы будете рисовать разные по ширине объекты. Под самый узкий хорошо подойдет шеврон или стрелка, а под самый широкий — иконка письма.

Опытным путем я выяснил, что идеально — когда у вас иконка занимает всю область. Но тут есть один минус, пользуясь Adobe CC может возникнуть соблазн использовать экспорт объектов:

Этот экспорт автоматически обрежет область экспорта под размеры экспортируемого объекта. Но это плохо. Вы должны быть уверены на 146%, что размер объекта идеален для иконочного шрифта.

Я очень не рекомендую использовать этот инструмент. Делайте монтажные области сами.

Далее о разнице между спрайтами и иконочным шрифтом:

Вот наш конфиг:

gulp.task('iconfont', function(done){
var iconStream = gulp.src(['source/svg/*.svg'])
	.pipe(iconfont({ 
		fontName: 'rage-icons',
		normalize: false,
		prependUnicode: true,
		startUnicode: 0xE001,
		//fontHeight: 550,
		formats: ['ttf', 'eot', 'woff','truetype','svg','woff2'],
		copyright: 'iAmStudio',
		centerHorizontally: false,
		//ascent : 50,
		descent : 60,
	}));
async.parallel([
	function handleGlyphs(cb) {
		iconStream.on('glyphs', function(glyphs, options) {
			// Font css
			gulp.src('source/templates/font-rage.css')
				.pipe(consolidate('lodash', {
					glyphs: glyphs,
					fontName: 'rage-icons',
					fontPath: '../fonts/',
					className: 'rage',
				}))
				.pipe(gulp.dest('dist/css/'))
				.on('finish', cb);
			console.log(glyphs, options);
		});
	},
	function handleFonts(cb) {
		iconStream
			.pipe(gulp.dest('dist/fonts/'))
			.on('finish', cb);
	}
], done);
});

Основная часть генерации шрифта находится в первой переменной iconStream:

• fontName — название шрифта, название пойдет в ссылки и название самих шрифтов

• normalize — по умолчанию отключено, но тут я игрался с размерами

prependUnicode — в этой опции внезапно вылезла и проблема, и спасение. Чтобы при изменении иконок (добавлении, удалении) не менялся их unicode необходимо включить эту опцию. Тогда к исходникам будет добавлен в начале название файла юникод. Вот таким образом.

Проблема, как оказалось, в том, что так называть файлы противоречит концепции “все и сразу". Ведь у меня для таких случаев один файл в иллюстраторе и необходимое кол-во монтажных областей. Так можно видеть сразу все. И для экспорта каждую монтажную область необходимо переименовать с учетом их названий в папке ресурсов. Это реальная проблема, потому что генерируя символы (gulp-sprites) названия необходимы без префиксов. Решение вышло костыльное — я создал 2 файла для экспорта, одно с названием монтажных областей с юникодами, другое без.

• startUnicode — у нас стало персональным фетишем, а вообще может реально спасти, когда вы используете 2 и более набора шрифтов в проекте. Просто задайте максимальное значение предыдущего шрифта и тогда этот настроится как бы сверху. На самом деле все равно, шрифты-то разные, но нам в общем не пригодилось. Сделали по-красоте ибо в оригинале стоит другое значение не от нулей.

• fontHeight — спасает, если у вас маленькие иконки и включен normalize: true.

• centerHorizontaly — скорее всего не даст результата

• ascent — из области профессионального построения шрифтов, опуск шрифта, может спасти, когда размеры шрифта разные, вы построили по меткам и надо его подравнять.

• descent — подъем шрифта, тоже может выручить

Далее идет создание css стилей для работы иконок. Мы привязали класс rage к тегу i, дабы разделить иконки шрифта от svg с тем же классом.

Данную методу я использовал по причине того, что шрифты можно приравнять к растровому изображению, прорисовка их явно хромает, и приходится загружать сразу несколько шрифтов, чтобы наверняка.

SVG символы можно использовать очень удобно: это просто и прорисовка будет кошерная. Плюс есть много плюшек в отличии от шрифта, самый банальный пример — для svg символа можно явно указать обводку в стилях или при вызове. И при этом можно использовать точно также, как шрифт, для этого необходимо указать:

1. font-size: 1em — для родителя
2. height + width: 1em — обязательно необходимо указать размеры, иначе сплющится иконка и ее не будет видно
3. fill: currentColor — тогда иконка будет наследовать свойство color.

gulp.task('symbols', function () {
gulp.src('source/symbols/*.svg')
	.pipe(svgSprite({
		mode:'symbols',
		svgId: 'rage-%f',
		preview: false,
	}))
	.pipe(gulp.dest('dist/'));
});

Конфиг проще, чем для шрифта:

1. mode — режим обработки, можно также выбрать и спрайты, но это не наш случай
2. svgId — %f — в данном случае это название файла. Вот из-за чего нельзя использовать экспортные случаи с юникодом
3. preview — создает файл html где перечислены все иконки.

1. Прорисовка
2. Кастомизация

Вообще рассуждать можно долго, но следует отметить и плюсы шрифта иконочного, как минимум это низкий порог вхождения пользователя. Подключил и используешь.

Тем не менее для svg не требует много манипуляций. Его нужно подключить непосредственно встроив в документ в body в самом начале, чтобы отработало наверняка. И далее просто вызывать в конструкции:

<svg class="rage"><use xlink:href="#rage-name"/></svg>

1. Если явно указать fill="currentColor" в коде символа, то повлиять на него с помощью css будет уже нельзя, только указывая свойство color
2. Internet Explorer чистит кеш, а Edge без перезапуска не ест новые стили

Надеемся данная статья вам поможет в свои начинаниях