Por que o Vue avisa sobre o dentro do meu SVG?

O Vue remove tags dos templates porque elas têm efeitos colaterais. Mova o CSS para o bloco do componente ou converta-o em atributos antes da conversão.

Converter SVG em componente Vue (SFC)

Converter SVG em um componente de arquivo único do Vue

Envolva qualquer SVG em um componente de arquivo único do Vue 3 (.vue) com um <template> limpo, <script setup lang="ts"> opcional e uma prop size, pronto para importar no seu app.

Como é o resultado para Vue

Templates do Vue aceitam atributos SVG como estão, então o conversor mantém nomes em kebab-case como stroke-width e class. Ele remove o ruído do editor, a declaração XML e, opcionalmente, o xmlns, e coloca a marcação dentro de um bloco <template>.

Com a opção size ativada, um bloco <script setup> declara uma prop size com valor padrão e a vincula a :width e :height. Com TypeScript, a prop é declarada com defineProps<{ size?: number | string }>() e withDefaults.

Repasse automático de atributos

Como o <svg> é o único elemento raiz, o Vue repassa automaticamente os atributos que não foram declarados como props. Ou seja, class, style, aria-label e listeners como @click chegam ao <svg> sem nenhum código extra. Por isso a opção de repassar props não é necessária no Vue.

Usando o componente

Uso típico em um projeto Vue 3 ou Nuxt:

Salve o resultado como IconName.vue na sua pasta de componentes.
Importe: import IconName from "./IconName.vue".
Renderize <IconName :size="20" class="text-emerald-600" /> em qualquer template.
Com currentColor ativado, o ícone segue a propriedade CSS color.

Perguntas frequentes

O resultado funciona com Vue 2?

O template também funciona no Vue 2.7, mas <script setup> com defineProps exige Vue 2.7 ou Vue 3. Em projetos Vue 2 mais antigos, desative a prop size para obter um componente só com template.

Posso usar com Nuxt?

Sim. Coloque o arquivo no diretório components e o Nuxt vai importá-lo automaticamente pelo nome, por exemplo <IconArrow /> para components/IconArrow.vue.

Por que o Vue avisa sobre o <style> dentro do meu SVG?

O Vue remove tags <style> dos templates porque elas têm efeitos colaterais. Mova o CSS para o bloco <style scoped> do componente ou converta-o em atributos antes da conversão.

O vite-svg-loader é uma opção melhor?

Um loader é prático quando você importa muitos SVGs em tempo de build. Converter para arquivos .vue dá controle total sobre a marcação e as props e não exige configuração de build.