繁体   English   中英

在 Next.js 中动态获取 SVG 图标

Get SVG icons dynamically in Next.js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想动态获取 SVG 图标。 我找到了一种方法来做到这一点,但似乎我犯了一些错误。 我哪里做错了?

图标.js

import React from "react";
import { ReactComponent as Bollards } from "./icons/bollards.svg";
import { ReactComponent as Earthquake } from "./icons/earthquake.svg";
import { ReactComponent as Fire } from "./icons/fire.svg";
import { ReactComponent as Healthy } from "./icons/heartbeat.svg";
import { ReactComponent as Home } from "./icons/home.svg";
import { ReactComponent as Planting } from "./icons/planting.svg";
import { ReactComponent as Business } from "./icons/suitcase.svg";
import { ReactComponent as Travel } from "./icons/airplane-around-earth.svg";

const iconTypes = {
  bollards: Bollards,
  earthQuake: Earthquake,
  fire: Fire,
  healthy: Healthy,
  home: Home,
  planting: Planting,
  business: Business,
  travel: Travel
};

const IconComponent = ({ name, ...props }) => {
  let Icon = iconTypes[name];
  return <Icon {...props} />;
};

export default IconComponent;

特征.js

import React from "react";
import Icon from "./icon";

export default function Features() {
  return (
    <div>
      <Icon name="bollards" />
    </div>
  );
}

尝试导出图标时出现此错误。

error - ./components/icon.js
Attempted import error: 'ReactComponent' is not exported from './icons/bollards.svg' (imported as 'Bollards').
1 个回复

您可以使用SVGR ,它允许我们将SVG作为组件导入到您的 React 应用程序中。

您需要添加@svgr/webpack作为依赖项并像这样修改next.config.js文件。

next.config.js

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

然后,您可以简单地导入您的图标,而无需使用ReactComponent

Icon.js :

import React from "react";

import Bollards from './icons/bollards.svg';
import Earthquake from './icons/earthquake.svg';
import Fire from './icons/fire.svg';
import Healthy from './icons/heartbeat.svg';
import Home from './icons/home.svg';
import Planting from './icons/planting.svg';
import Business from './icons/suitcase.svg';
import Travel from './icons/airplane-around-earth.svg';

const iconTypes = {
  bollards: Bollards,
  earthQuake: Earthquake,
  fire: Fire,
  healthy: Healthy,
  home: Home,
  planting: Planting,
  business: Business,
  travel: Travel
};

const IconComponent = ({ name, ...props }) => {
  let Icon = iconTypes[name];
  return <Icon {...props} />;
};

export default IconComponent;

CodeSandbox提供了工作演示。

1 如何在 Next.js 中获取特定的动态 DOM 元素

我有一个使用轮播库(swiper js)的 SSR 站点设置。 我遇到的问题是,在页面加载后,库会使用其相关的 CSS 类生成所需的 HTML……这很好。 现在,我需要使用“active”类获取由库创建的动态生成的元素。 除此之外,我还需要抓住它左边的 3 个兄弟姐妹,以及它右边的 3 个三个兄弟姐 ...

3 Next.js 中的默认动态路由

Next.js 使我们能够使用括号[param]在我们的应用程序中定义动态路由。 它允许我们以例如语言作为参数传递的方式设计 URL。 当没有路由匹配时,用户被重定向到错误页面。 这个想法很简单,而且 Next.js 中与动态路由相关的文档相当有限。 有人知道是否可以为动态路由参数分配默认值? ...

4 在 Next.js 中获取数据

您不应该从 getStaticProps 获取 API 路由——相反,您可以直接在 getStaticProps 中编写服务器端代码。 上面的句子来自 next.js 的官方文档,我觉得它很混乱。 是说我不应该对我的宁静 api 做 ajax 请求吗? (我使用 node express ...

5 在Next.js中获取速度很慢

我正在将与Airtables连接的Next.js用于一个业余项目。 我的项目是关于使用关键字搜索歌曲。 输入后,您应该看到列出的所有歌曲,其中歌词包含键入的关键字。 我遵循了Next.js docs和Airtables,每当我通过关键字或所有关键字来获取歌曲时,确实感觉它正在缓慢地获取,尤其是在第一 ...

10 将SVG添加到Next.js

我正在尝试将SVG添加到我的nextjs应用程序中,但似乎无法正常工作。 我正在尝试添加一个webpack加载器。 Webpack配置: 我如何在项目中尝试使用SVG(在组件中而不是下一个js页面中) ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM