如何在 nextjs 中导入 SVG答案

【问题标题】：How to import SVG's in nextjs如何在 nextjs 中导入 SVG
【发布时间】：2022-11-07 23:10:45
【问题描述】：

我正在将我的反应网站迁移到 nextjs。我在根目录有一个 assets 文件夹，其中包含许多 svg，我有一个 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,
  },
]

文件夹结构：

【问题讨论】：

标签： javascript reactjs svg next.js nextjs-image

【解决方案1】：

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

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

【讨论】：