SVG → Vue
Embrulhe qualquer SVG em um componente de arquivo único .vue — ou pegue só o bloco de template para um componente que você já tem.
ou clique para procurar — somente SVG
O nome do componente vem do nome do arquivo. O bloco script só dá nome ao componente — apague se não precisar disso.
Só a marcação, para colar dentro de um componente que você já tem. Se o SVG tinha um elemento style embutido, o CSS dele está no bloco style do arquivo acima, não aqui.
sem renomear nada
Templates do Vue são interpretados como HTML, então um SVG entra exatamente como foi escrito. stroke-width continua stroke-width, class continua class e um atributo style inline continua funcionando. A conversão é basicamente embrulhar o arquivo — e é por isso que a saída se parece tanto com a entrada.
O resto fica por conta do repasse de atributos. Com um único elemento raiz, tudo que você colocar no componente cai na tag svg, então width, class ou um manipulador de clique funcionam sem declarar nenhuma prop.
três passos
Escolha um arquivo .svg — ele fica no seu dispositivo.
Um arquivo .vue inteiro ou só o template.
Importe como qualquer outro componente e defina o tamanho de fora.
respostas rápidas
Porque você não precisa de uma. Um componente de raiz única repassa qualquer atributo direto para a tag svg, então width, height, class e ouvintes de evento já funcionam. Declare props apenas quando quiser calcular algo a partir delas.
Apenas para dar um nome ao componente, que aparece no Vue devtools e nas mensagens de aviso. Sem ele o componente renderiza igual, então apagar é totalmente seguro.
Para o bloco style com scoped no fim do componente. O Vue descarta tags style e script encontradas dentro de um template, então um SVG exportado do Illustrator ou do Figma — que quase sempre carrega uma folha de estilos embutida — renderizaria sem cor nenhuma. Tirar o CSS de lá mantém tudo funcionando, e o scoped garante que ele não vaze para o resto do app.
Substitua o fill ou stroke fixo por currentColor e defina a cor no CSS de um elemento pai. O alterador de cor de SVG pode trocar todas as cores do arquivo por currentColor antes da conversão.
Para esta saída, sim — script setup e defineOptions são recursos do Vue 3. No Vue 2 o bloco de template continua servindo: cole-o no template de um componente comum de Options API.
Não. A conversão é puro trabalho de texto feito no seu navegador.