javascript - Get SVG icons dynamically in Next.js - Stack Overflow

admin管理员组

文章数量:1291037

I wanted to get SVG icons dynamically. I found a method to do this but it seems I made some mistakes. Where am I doing it wrong?

Icon.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;

Feautures.js

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

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

I get this error when trying to export icons.

error - ./ponents/icon.js
Attempted import error: 'ReactComponent' is not exported from './icons/bollards.svg' (imported as 'Bollards').

I wanted to get SVG icons dynamically. I found a method to do this but it seems I made some mistakes. Where am I doing it wrong?

Icon.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;

Feautures.js

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

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

I get this error when trying to export icons.

error - ./ponents/icon.js
Attempted import error: 'ReactComponent' is not exported from './icons/bollards.svg' (imported as 'Bollards').

• javascript
• reactjs
• svg
• next.js

Share Improve this question Follow edited Jan 25, 2021 at 21:18 Zsolt Meszaros 23.2k1919 gold badges5757 silver badges6969 bronze badges asked Jan 25, 2021 at 19:34 İbrahimİbrahim 20511 gold badge55 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You can use SVGR that allows us to import SVGs into your React applications as ponents.

You need to add @svgr/webpack as a dependency and modify the next.config.js file like this.

next.config.js:

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

Then, you can simply import your icons without using 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;

Working demo is available on CodeSandbox.

本文标签： javascriptGet SVG icons dynamically in NextjsStack Overflow