无法将 SVG 导入 Next.js [英] Can't import SVG into Next.js

问题描述

当我尝试导入 SVG 图像时，会显示以下错误.我必须使用哪个加载程序来导入 SVG 图像?

When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?

./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>

推荐答案

你需要提供一个 webpack loader 来处理 SVG 导入，其中一个著名的就是 svgr.

You need to provide a webpack loader that will handle SVG imports, one of the famous one is svgr.

为了配置它以使用 next，您需要将加载器的用法添加到您的 next.config.js 文件中，如下所示:

In order to configure it to work with next, you need to add to your next.config.js file the usage of the loader, like that:

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

    return config;
  },
};

有关更多配置信息，查看文档.

别忘了先安装:npm install —-save-dev@svgr/webpack

编辑

我添加了一个 issuer 部分，该部分将这些 svg 严格为组件，仅适用于从 js/ts 文件导入的 svg.这允许您为从其他文件类型(例如 .css)导入的 svg 配置其他行为

I've added an issuer section which strict these svg as component only for svgs that are imported from js / ts files. This allows you to configure other behaviour for svgs that are imported from other file types (such as .css)

这篇关于无法将 SVG 导入 Next.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！