如何在nextjs中导入SVG

Question

我正在将我的 React 网站迁移到 nextjs。我的根目录下有一个 asset 文件夹，其中包含大量 svgs，还有一个 Constants.js 文件，我将所有 SVG 作为 ReactComponent 导入其中。我想知道如何在nextjs中转换这部分代码。

错误信息：

Module not found: Can't resolve '../../../assets/skills/html5.svg'
> 1 | import { ReactComponent as HTML } from "../../../assets/skills/html5.svg";
  2 | import { ReactComponent as CSS } from "../../../assets/skills/css.svg";

常量.js

import { ReactComponent as HTML } from "../../../assets/skills/html5.svg";
import { ReactComponent as CSS } from "../../../assets/skills/css.svg";

export const SKILLS = [
  {
    name: "html",
    image: HTML, // SVG Component
  },
  {
    name: "css",
    image: CSS,
  },
]

文件夹结构：

Answer 1

您可以将 SVGR 设置到您的项目中并将它们添加为常规 React 组件。你的代码最终可能看起来像这样

export const SKILLS = [
  {
    name: "html",
    image: <Html className="html"/>, // SVG Component
  },
  {
    name: "css",
    image: <Css className="css"/>,
  },

Answer 2

编辑

next.config.js

使其像这样：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
};

如何在nextjs中导入SVG

问题描述投票：0回答：2

2个回答

最新问题

如何在nextjs中导入SVG

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2