Búsqueda de sitios web

reactjs - No se puede importar SVG con Vite como ReactComponent

Intenté usar esta biblioteca: vite-plugin-react-svg

y no tuvo éxito al importarlo así:

import { ExternalLink } from 'assets/svg/link-external.svg?component';

¿Hay alguna solución alternativa para este problema?

El error que obtuve antes fue el siguiente:

import { ReactComponent as ExternalLink } from 'assets/svg/link-external.svg';

//Uncaught SyntaxError: 
  The requested module '/src/assets/svg/link-external.svg?import'
  does not provide an export named 'ReactComponent'

Respuesta #1

Actualización octubre 2023 - vite-plugin-svgr versión ^4.0.0

Al importar tu archivo SVG usando vite-plugin-svgr (ver más abajo), asegúrate de usar el nuevo sufijo de consulta ?react en tu archivo importado, lo que te permite usar la exportación predeterminada y omitir el alias ReactComponent:

import ReactLogo from './assets/react.svg?react'

<ReactLogo />

Si estás usando TypeScript, también necesitarás añadir lo siguiente en la parte muy superior de tu archivo (antes de las declaraciones import):

/// <reference types="vite-plugin-svgr/client" />

Actualización 2023

👉 Usa vite-plugin-svgr

  1. Agrega SVGR al proyecto
yarn add vite-plugin-svgr
  1. Registra el plugin SVGR en vite en vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr' 

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    svgr({ 
      svgrOptions: {
        // svgr options
      },
    }),
  ], 
})
  1. En App.tsx importa SVG como Componente de React:
import { ReactComponent as ReactLogo } from './assets/react.svg'

<ReactLogo />

Ejemplos de Stackblitz:

  • proyecto estándar
  • usando proyecto SVG dinámico

Referencias:

  • Aprende más sobre SVGR en https://react-svgr.com/docs/ecosystem/#articles
  • opciones del complemento
  • lista de opciones de SVGR que se pueden agregar a svgrOptions:{}:

Bono :

  • Componente SVG dinámico por Amit Mondal

Nota: El plugin anterior @honkhonk/vite-plugin-svgr está obsoleto (gracias a Richard Fernandez por señalarlo)

Respuesta #2

Cualquiera que tenga problemas con la respuesta aceptada, pruebe la solución descrita en este paquete: https://www.npmjs.com/package/vite-plugin-svgr

import { ReactComponent as Logo } from './logo.svg'

Por alguna razón, no pude compilar usando la respuesta aceptada

Respuesta #3

Deberías usar @svgr/rollup en lugar de vite-plugin-svgr. vite-plugin-svgr no es una buena opción, porque no soporta svgo, y utiliza esbuild para transformar parte del código svg, lo que puede causar algunos problemas en entornos es5.

Lo peor es que vite-plugin-svgr no puede agregar el plugin svgo, vea este problema: https://github.com/pd4d10/vite-plugin-svgr/issues/49.

npm install @svgr/rollup -D

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

export default defineConfig({
  plugins: [react(), svgr()]
});

Respuesta #4

yarn add -D vite-plugin-svgr será la mejor opción ya que sigue siendo mantenido.

// vite.config.js
import svgr from 'vite-plugin-svgr'

export default {
  plugins: [svgr()],
}

import { ReactComponent as Logo } from './logo.svg'

También puedes importar como predeterminado configurando esta opción en vite.config.js.

svgr({
  exportAsDefault: true
})

// now you can import as default
import Logo from './logo.svg'

Pero nota que esto sobrescribirá el comportamiento predeterminado de Vite, que exporta la URL como predeterminado.

Si tienes algún problema con TypeScript, también hay un ayudante de declaraciones para una mejor inferencia de tipos

/// <reference types="vite-plugin-svgr/client" />

Artículos relacionados