web-dev-qa-db-fra.com

Impossible d'importer SVG dans Next JS?

Lorsque j'essaie d'importer une image SVG, l'erreur suivante s'affiche. Quel chargeur dois-je utiliser pour importer des images SVG?

./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123-16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>
reactjswebpack-4next.js
15
Shifut Hossain

Vous devez fournir un chargeur de webpack qui gérera les importations SVG, l'un des fameux est svgr .

Afin de le configurer pour fonctionner avec le suivant, vous devez ajouter à votre next.config.js fichier l'utilisation du chargeur, comme ça:

// next.config.js

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

    return config;
  },
};

Pour plus d'informations sur la configuration, consultez la documentation .

N'oubliez pas de l'installer en premier: npm install@svgr/webpack

Modifier

J'ai ajouté la section issuer qui restreint ces svg en tant que composant uniquement pour les svgs importés de js / ts des dossiers. Cela vous permet de configurer un autre comportement pour les svg importés à partir d'autres types de fichiers (tels que .css)

23
felixmosh

Installez images-suivantes .

yarn add -D next-images

Créez un next.config.js dans votre projet

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

Vous pouvez utiliser babel-plugin-inline-react-svg

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

npm install --save-dev babel-plugin-inline-react-svg

// .babelrc
{
  "plugins": [
    "inline-react-svg"
  ]
}

Ou consultez le lien pour plus d'instructions.

2
Qwerty

Cela a fonctionné pour moi sans aucune autre dépendance

// In next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.Push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });
        return config;
    }
}));
1
Salil Sharma