No se puede importar SVG en Next.js

Solución:

Debe proporcionar un cargador de paquetes web que maneje las importaciones de SVG, uno de los famosos es svgr.

Para configurarlo para que funcione con el siguiente, debe agregar a su next.config.js archivar el uso del cargador, así:

// next.config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /.svg$/,
      issuer: {
        test: /.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

Para obtener más información de configuración, consulte los documentos.

No olvides para instalarlo primero: npm install@svgr/webpack

Editar

he añadido issuer sección que estricta estos svg como componente solo para svgs que se importan desde js / ts archivos. Esto le permite configurar otro comportamiento para svgs que se importan de otros tipos de archivos (como .css)

Instale next-images.

yarn add -D next-images

Crea un next.config.js en tu proyecto

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

Personalmente, prefiero el complemento next-react-svg que permite tratar las imágenes SVG como componentes de React y alinearlas automáticamente, similar a lo que hace la aplicación Create React.

Así es como se usa:

1. Instalar en pc next-react-svg:

npm i next-react-svg

2. Agregue la configuración necesaria a next.config.js:

const withReactSvg = require('next-react-svg')
const path = require('path')

module.exports = withReactSvg({
  include: path.resolve(__dirname, 'src/assets/svg'),
  webpack(config, options) {
    return config
  }
})

los include el parámetro es obligatorio y apunta a su carpeta de imágenes SVG.

Si ya tiene algún complemento habilitado para su Next.js, considere usar next-compose-plugins para combinarlos correctamente.

3. Importe sus SVG como componentes de React ordinarios:

import Logo from 'assets/svg/Logo.svg';

export default () => (
  <Logo />
);

Eso es todo. A partir de ahora, Next.js incluirá imágenes SVG importadas de esta manera en el marcado renderizado como etiquetas SVG.

---

---

Utiliza Nuestro Buscador