Скетч - удивительный и популярный инструмент для дизайна интерфейсов. К сожалению, иногда активы, которые он экспортирует, могут быть немного нестабильными. Сюда входит .svgs. Sketch использует маски и <defs> хорошо работает для создания многоразовых символов, но, к сожалению, может нарушить работу компонентов разработчика. В моем случае это нарушало работу компонента значка vue.js, который динамически импортировал файл .svg. Я решил создать сценарий для очистки экспортированного .svgs, который будет использоваться в моем компоненте.
В итоге я использовал svgson для создания исполняемого скрипта узла для очистки xml-элементов svg. Скрипт анализирует и извлекает элемент <path> или <polygon> и помещает его в тег <g>, чтобы удалить все ненужные элементы и атрибуты, которые нарушают наши компоненты vue.
Вы можете найти текущую реализацию в SVG Formatter Repository. Для обработки .svgs требуется аргумент --file или --directory.
Я не очень хорошо знаком с разметкой .svg, но был рад сохранить дизайн ← → конвейер разработки без сбоев 😸. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы, комментарии или дополнительная информация!
