Генериране на икони на шрифтове от скица

Има различни начини, по които иконите могат да се използват в интернет, като SVG и иконите на шрифтове са най-популярните формати. Тази статия ще разгледа как да експортирате иконите да ги конвертирате в икони на шрифт с едно щракване.

Защо иконите за шрифт? Иконите на шрифта се използват лесно за разработчиците. Можете лесно да дадете на иконите размер на шрифта или всеки цвят, който желаете, докато кодирате. В резултат на това вие имате пълен контрол върху техния стил. И така, как да създадем икони на шрифтове?

Процеса

Създайте библиотека с икони

Създайте символи на икони в Sketch, като приемете, че вече нямате библиотека с икони. Можете да започнете с 24x24 таблото за създаване на икони, тъй като това обикновено е добър стандарт и може да се мащабира лесно. Ако искате да прочетете как да създадете динамична библиотека с икони на Sketch, преминете към тази статия. Създадох и Sketch ресурс от 4 икони за тази статия, в случай че нямате библиотека с икони. Можете да го изтеглите тук.

Създайте набор от символи на иконите

Преобразувайте щрихите в очертания

В случай че сте използвали рамки / щрихи на някоя от вашите икони, не забравяйте да ги преобразувате в контури, преди да продължите. Иконите на шрифта са една-единствена форма и не работят с граници.

Можете да изберете частите от иконата, които са щрихи, и изберете слой> Конвертиране в контури. Пряк път за това е просто натискане на Shift + Cmd + O.

Комбинирайте фигурите до една форма

За да може една икона да бъде икона на шрифт, те трябва да са една единствена комбинирана форма. Можете да го направите от лентата с инструменти Sketch. Изберете два слоя, които искате да комбинирате, и изберете булева операция, която искате да извършите. Повторете това, докато не ви остане една единствена комбинирана форма.

Можете да използвате тези булеви операции на лентата с инструменти, за да създадете единична комбинирана формаКак трябва да изглежда вашата икона, след като комбинирате всичко в една единствена форма

Ако имате проблеми с комбинирането на фигурите, имам на разположение ресурс от 4 икони, които са всички сложни форми, така че можете да взаимодействате с тях и да видите как са направени. Можете да изтеглите файла Sketch тук.

Експортирайте иконите в папка като SVG

Изберете всички икони, които искате да експортирате, направете всички износими и изберете SVGs от падащото меню под опциите за експортиране. Можете да направите това в Предварителни настройки от дясната странична лента. Експортирайте всички в една папка за по-лесно откриване.

Експортирайте иконите като SVG файлове в папка

Качете всички икони в Icomoon

Сега, когато имаме всички икони във SVG формат, отворете Icomoon (той е безплатен) и кликнете върху Импортиране на икони. Изберете всички икони, които искате да конвертирате в икони на шрифт, и ги качете. Не е нужно дори да влизате, за да направите това и библиотеката ви с икони остава онлайн, когато посещавате icomoon, стига да посещавате от същото устройство.

Как трябва да изглежда след като качите SVG

Преобразувайте иконите в икони за шрифт

След като сме качили всички икони, изберете ги всички и щракнете върху Генериране на шрифт в долната дясна част на страницата. Сега ще видите списък на всички създадени глифи и можете просто да ги изтеглите от долния десен ъгъл на страницата.

Сега можете да изтеглите иконите на шрифта за тези SVG файлове

Това е! Сега можем просто да дадем ZIP файла на разработчиците и те могат да използват съдържанието, за да използват иконите на шрифта на уебсайта.

Благодаря за четенето! Ако искате да научите как да създадете динамична библиотека с икони в дълбочина, можете да се насочите към тази статия.