文章/答案/技术大牛

发布

问如何在nextjs中导入SVG
EN

Stack Overflow用户

提问于 2022-11-07 13:37:01

回答 1查看 64关注 0票数 0

我正在将我的react网站迁移到nextjs。我在根目录下有一个资产文件夹，其中包含大量的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";

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

Stack Overflow用户

发布于 2022-11-07 15:10:45

您可以将SVGR设置到您的项目中，并将它们添加为常规的react组件。您的代码最终可能会像这样

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74347477

复制

相似问题

问如何在nextjs中导入SVG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nextjs中导入SVGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nextjs中导入SVG
EN