Converter SVG em componente Vue
Cole um SVG e obtenha um componente Vue 3 (.vue) de arquivo único, pronto para ser importado no seu projeto, com repasse automático dos atributos (class, style, tamanho) ao elemento pai.
Por que transformar um SVG em componente Vue em vez de importá-lo como está?
Um componente Vue dedicado a um ícone permite reutilizá-lo facilmente em todo o projeto, passar classes ou estilos (cor, tamanho) a partir de qualquer componente pai e aproveitar o realce de sintaxe e as verificações do seu editor, como em qualquer outro componente Vue.
O Vue exige converter os atributos para camelCase como o React?
Não, ao contrário do React/JSX, os templates do Vue aceitam nativamente atributos em kebab-case (stroke-width, fill-rule...) como estão: nenhuma conversão de atributos é necessária, apenas um v-bind="$attrs" é adicionado para permitir personalizar o componente no uso.
Posso mudar a cor do ícone a partir do componente pai?
Se o seu SVG usa fill="currentColor" (como no exemplo), a cor do texto CSS ao redor é aplicada automaticamente ao ícone: basta mudar a propriedade CSS color do pai para recolorir o ícone sem mexer no componente.
Seu arquivo SVG permanece privado: a conversão em componente Vue é executada inteiramente no seu navegador, sem nenhum envio a um servidor.