17: Інструмент побудови - IcoMoon - CSS-хитрощі

Anonim

Термін "інструмент побудови" може бути страшним. Це нагадує вигадливі інструменти командного рядка, що вимагають конфігурації та дивних системних залежностей, які порушуються, коли ви неправильно на них дивитесь. Іноді інструменти побудови подібні, і ми підемо туди в цій серії. Але насправді інструмент побудови - це лише те, що полегшить ваш процес. Автоматизуйте те, що раніше ви робили вручну.

IcoMoon, в цьому сенсі, є інструментом побудови. Це був (є) популярний інструмент для створення власних шрифтів значків. Це чудово для цього. Я підтримую будь-який інструмент, який заохочує розробників інтерфейсів створювати індивідуальні, впорядковані ресурси лише для того, що їм потрібно, а не включати кухонну раковину (кожну піктограму на землі) і просто використовувати її шматочки. IcoMoon призначений не лише для шрифтів значків @ font-face, але він може виводити блоки SVG defs, які він називає спрайтом SVG (також цілком прийнятний термін).

В основному ви натискаєте потрібні піктограми, а потім експортуєте їх, і ви отримуєте ідеальний SVG defs-блок для використання. Зверніть увагу, що вони ще не використовують , і я не впевнений, чому, але це означає, що вам потрібно буде включати viewBoxречі та доступність самостійно під час їх реалізації. Зареєструйтеся там, і ви зможете зберегти проект, тобто ви можете повернутися і видалити / додати речі за потреби, а не починати з нуля. Це насправді робить його інструментом побудови.

Важливо знати про IcoMoon: ви можете додати свій власний SVG. Ви не обмежуєтесь лише тим, що бачите в додатку за замовчуванням. Ви можете отримати SVG з іншого місця і просто додати його туди, і він збереже ваш проект. Ви можете використовувати IcoMoon як інструмент побудови лише зі своїм власним SVG, і це все одно буде корисним.