How to import whole `react-icons` pack in a single line import

Issue

This Content is from Stack Overflow. Question asked by Rayhan Mahi

We need to import different icon packs from react-icons by different import line. e.g:
import {FaUser} from 'react-icons/fa
But in my case I’m taking the icon names from json file and trying to destucture and show them in my component. Icons can be from multiple packs.So, I need to import the whole pack. Is there any solution for this?

    title: 'Home',
    url: '/',
    icon: 'ImHome',
  },
  {
    title: 'About',
    url: '/about',
    icon: 'FaUserCircle',
  },```


```import * as Icons from 'react-icons/all';

const CustomIcons = ({ icon, className }) => {
  const { [icon]: Icon } = Icons;
  return (

    <div className={className}>
      <Icon />
    </div>
  );
};

export default CustomIcons;```




Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?