javascript - Dynamic import of react-icons - Stack Overflow

admin管理员组

文章数量:1334295

Is it possible to import dynamically react-icons if each of icon is a separate ponent? My code looks like this:

import React from 'react';

import { Icon1, Icon2, Icon3, Icon4 } from 'react-icons/ri';

const Foo = () => (
  <div className="xxx">
    <div className="y">
      <Icon1 />
    </div>
    <div className="y">
      <Icon2 />
    </div>
    <div className="y">
      <Icon3 />
    </div>
    <div className="y">
      <Icon4 />
    </div>
  </div>
);

export default Foo;

and would want it to look close to this:

import React from 'react';

const Buttons = () => {
  const iconsList = ['Icon1', 'Icon2', 'Icon3'];
  const renderIcon = (icon) => {
   const Icon = icon;
   return (
    <div className="y">
     <Icon />
    </div>
   )
  }

  return (
   <div className="d-flex align-items-center justify-content-end">
    {iconsList.map(icon => renderIcon(icon))}
   </div>
 )
};

export default Buttons;

The problem I face is how to make the import of icons work there if I didn't want to import all icons using *. Also the problem is that if I make

import { Icon1, Icon2, Icon3, Icon4 } from 'react-icons/ri'

at the top, it still doesn't work for the second version of code.

Is it possible to import dynamically react-icons if each of icon is a separate ponent? My code looks like this:

import React from 'react';

import { Icon1, Icon2, Icon3, Icon4 } from 'react-icons/ri';

const Foo = () => (
  <div className="xxx">
    <div className="y">
      <Icon1 />
    </div>
    <div className="y">
      <Icon2 />
    </div>
    <div className="y">
      <Icon3 />
    </div>
    <div className="y">
      <Icon4 />
    </div>
  </div>
);

export default Foo;

and would want it to look close to this:

import React from 'react';

const Buttons = () => {
  const iconsList = ['Icon1', 'Icon2', 'Icon3'];
  const renderIcon = (icon) => {
   const Icon = icon;
   return (
    <div className="y">
     <Icon />
    </div>
   )
  }

  return (
   <div className="d-flex align-items-center justify-content-end">
    {iconsList.map(icon => renderIcon(icon))}
   </div>
 )
};

export default Buttons;

The problem I face is how to make the import of icons work there if I didn't want to import all icons using *. Also the problem is that if I make

import { Icon1, Icon2, Icon3, Icon4 } from 'react-icons/ri'

at the top, it still doesn't work for the second version of code.

• javascript
• html
• css
• reactjs

Share Improve this question Follow asked Sep 1, 2022 at 19:17 funnyguyfunnyguy 10711 silver badge99 bronze badges 1

• have a look at this: stackoverflow./questions/42595264/… – Hasan Aga Commented Sep 1, 2022 at 19:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You have to replace the strings values of your icons in the iconsList array with the Icon ponent itself.

Just change :

const iconsList = ['Icon1', 'Icon2', 'Icon3'];

to :

const iconsList = [Icon1, Icon2, Icon3];

And add a key to prevent Each child in a list should have a unique "key" prop.Warning like this :

{iconsList.map((icon, index) => renderIcon(icon, index))}

and :

const renderIcon = (icon, index) => {
    const Icon = icon;
    return (
      <div className="y" key={index}>
        <Icon />
      </div>
    );
  };

this is an example in codesandbox

Note : If you import all icons using * , you're importing hundreds of icons at once which is probably not ideal.

本文标签： javascriptDynamic import of reacticonsStack Overflow