当我尝试导入SVG图像时,将显示以下错误。我必须使用哪个加载程序来导入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>
您需要提供一个可处理SVG导入的webpack加载器,其中著名的一种是svgr。
为了对其进行配置,您需要将加载next.config.js程序的用法添加到文件中,如下所示:
next.config.js
// next.config.js module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, issuer: { test: /\.(js|ts)x?$/, }, use: ['@svgr/webpack'], }); return config; }, };
有关更多配置信息,请查看docs。
不要忘记 先安装它:npm install@svgr/webpack
npm install
@svgr/webpack
编辑
我添加了issuer将这些svg严格限制为仅适用于从js / ts文件导入的svg的部分。这使您可以配置svg从其他文件类型(例如.css)导入的的其他行为
issuer
js / ts
svg
.css