[Sugestão] Import SVG não funcionando em Vite

Para quem está usando vite ao invés de CRA(Create React App) provavelmente teve problemas em importar o SVG assim como eu tive, então estou sugerindo o que fazer para corrigir.

Rode na pasta raiz do projeto npm install vite-plugin-svgr

Na pasta raiz abra o arquivo vite.config.js e importe o que recém instalou: import svgr from 'vite-plugin-svgr'

no mesmo arquivo na função de export, adicione também em plugins a função: svgr()

ficando assim o arquivo:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [ svgr(), react()]
})

Importe o svg como recomenda o curso e isso já deve funcionar... Em caso de uso de typescript ao invés de javascript instale e importe @honkhonk/vite-plugin-svgr