Utilizando o SVG como um componente no Vue e Vite

Para carregar um arquivo SVG como um componente em um projeto Vue com Vite, você pode seguir os seguintes passos:

Instale o vite-svg-loader

O primeiro passo é instalar instalar a biblioteca vite-svg-loader.

Dentro da sua pasta de trabalho, execute o seguinte comando:

yarn add -D vite-svg-loader

Ou, se você tiver utilizando o npm, assim:

npm install vite-svg-loader -D

Configurando o vite-svg-loader

Nesta etapa, precisamos configurar o vite-svg-loader no script de configuração vite.config.js, com a seguinte declaração:

import svgLoader from 'vite-svg-loader'
export default defineConfig({
plugins: [
svgLoader({ defaultImport: 'url' }),
// ... restante do código
]
})

Importando o .svg como component

Agora, você pode carregar os arquivos .svg como se fosse component. Para isso, basta importar o .svg adicionando ao final a declaração ?component.

Exemplo:

<template>
<div>
Exibir o component:
<CardComponent width="100" />
</div>
</template>

<script setup>
import CardComponent from "./svg/car.svg?component"
</script>

Resultado:

Observação

Observe que, no script de configuração do Vite, adicionamos a propriedade defaultImport com o valor 'url'. Configurando seu projeto dessa forma, podemos evitar conflitos em carregamentos do SVG, caso seu projeto já esteja em avançado desenvolvimento ou esteja carregando alguns arquivos SVGs considerando importações anteriores.