17: Инструмент сборки - IcoMoon - CSS-хитрости

Anonim

Термин «инструмент сборки» может напугать. Это напоминает о причудливых инструментах командной строки, требующих настройки, и странных системных зависимостях, которые ломаются, если вы посмотрите на них неправильно. Иногда инструменты сборки такие, и мы рассмотрим это в этой серии. Но на самом деле инструмент сборки - это просто то, что помогает облегчить ваш процесс. Автоматизируйте то, что вы раньше делали вручную.

В этом смысле IcoMoon - это инструмент для сборки. Это был (есть) популярный инструмент для создания пользовательских шрифтов для иконок. Для этого это прекрасно. Я поддерживаю любой инструмент, который побуждает разработчиков интерфейса создавать настраиваемые, оптимизированные ресурсы именно для того, что им нужно, вместо того, чтобы включать кухонную раковину (каждый значок на земле) и просто использовать ее части. IcoMoon предназначен не только для шрифтов со значками @ font-face, он может выводить блоки SVG defs, которые он называет спрайтом SVG (также вполне приемлемый термин).

Обычно вы щелкаете нужные значки, а затем экспортируете их, и вы получаете идеальный блок SVG defs для использования. Обратите внимание, что они еще не используются , и я не уверен, почему, но это означает, что вам нужно будет включать viewBoxи специальные возможности самостоятельно, когда вы их реализуете. Зарегистрируйте там учетную запись, и вы сможете сохранить проект, что означает, что вы можете вернуться и удалить / добавить что-то по мере необходимости, а не начинать с нуля. Это действительно делает его инструментом для сборки.

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