Преобразовать SVG в компонент Vue
Вставьте SVG и получите однофайловый компонент Vue 3 (.vue), готовый к импорту в ваш проект, с автоматической передачей атрибутов (class, style, размер) родителю.
Зачем превращать SVG в компонент Vue, а не импортировать его как есть?
Отдельный компонент Vue для иконки позволяет легко использовать её в любом месте проекта, передавать ей классы и стили (цвет, размер) из любого родительского компонента и пользоваться подсветкой и проверкой в вашем редакторе, как и для любого другого компонента Vue.
Нужно ли во Vue преобразовывать атрибуты в camelCase, как в React?
Нет, в отличие от React/JSX, шаблоны Vue изначально принимают атрибуты в kebab-case (stroke-width, fill-rule...) как есть: преобразовывать атрибуты не нужно, добавляется только v-bind="$attrs", чтобы компонент можно было настраивать при использовании.
Можно ли изменить цвет иконки из родительского компонента?
Если в вашем SVG используется fill="currentColor" (как в примере), цвет окружающего CSS-текста автоматически применяется к иконке: просто измените CSS-свойство color у родителя, чтобы перекрасить иконку, не трогая сам компонент.
Ваш файл SVG остаётся приватным: преобразование в компонент Vue выполняется целиком в вашем браузере, без какой-либо отправки на сервер.