CODEWITHSUNDEEP
reactjs
Ronald Zwiers
Ronald Zwiers

Reputation: 840

dynamically load react-icons into component

I am trying to dynamically load react-icons into a component. The code is looking like this:

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import * as MaterialDesign from 'react-icons/md';

const styles = {
 default: {
  flexDirection: 'column',
  alignItems: 'center'
 },
 inline: {
  flexDirection: 'row'
 }
};

const StyledTabs = styled.button`
 display: flex;
 cursor: pointer;
 color: ${props => props.color};

 ${props => styles[props.type]}
`;

const Tabs = ({ icon, type, text, color }) => {
 return (
  <StyledTabs icon={icon} type={type} text={text} color={color}>
   <span>
    <MaterialDesign.MdHome />
   </span>
   <span>{text}</span>
  </StyledTabs>
 );
};

Tabs.propTypes = {
 /** Text of tab */
 text: PropTypes.string.isRequired,
 /** Text of tab */
 type: PropTypes.oneOf(['default', 'inline']),
 color: PropTypes.string,
 icon: PropTypes.string
};

Tabs.defaultProps = {
 type: 'default',
 color: '#000',
 icon: ''
};

/**
 * @component
*/
export default Tabs;

So i want the name of the react-icon in the property icon and place the string in <MaterialDesign.MdHome /> MdHome will be the string given in the property icon e.g. MaterialDesign.{icon} any help with getting this done?

Upvotes: 11

Views: 16609

Answers (3)

Shams Wali Sowmo
Shams Wali Sowmo

Reputation: 369

This works fine for me using props:

import * as MaterialDesign from "react-icons/md";

const DashboardSidebarButton = ({ icon, text }) => {
// ...
<div className="text-3xl bg-red-500">{React.createElement(MaterialDesign[`${icon}`])}</div>
// ...
}

Upvotes: 2

Abhinav Kumar
Abhinav Kumar

Reputation: 364

One of the easiest and most efficient way is to setup an array of objects for react icons.

Something like this:

export const social_icons = [
      {
        id: 1,
        type: "Facebook",
        library: <FaFacebookF />,
        url: "https://facebook.com/abhishree143",
      },
      {
        id: 2,
        type: "Twitter",
        library: <FaTwitter />,
        url: "https://twitter.com/abhisri1997",
      },
      {
        id: 3,
        type: "GitHub",
        library: <FaGithub />,
        url: "https://github.com/dev-elixir",
      },
    ];

Then import in the component where you want to dynamically import the socials icons.

Ex: navigation in .js

<ul className="nav-menu">
          {nav_menu.map((item) => {
            const { id, text, url } = item;
            return (
              <li key={id} className="nav-link">
                <a href={url} onClick={() => handleSelect(id - 1)}>
                  {text}
                </a>
              </li>
            );
          })}
        </ul>

Here am using FontAwesome ReactJS icons.

Upvotes: 1

vijayst
vijayst

Reputation: 21846

Try this:

const Tabs = ({ icon, type, text, color }) => {
 const mdIcon = MaterialDesign[icon];
 return (
  <StyledTabs icon={icon} type={type} text={text} color={color}>
   <span>
    <mdIcon />
   </span>
   <span>{text}</span>
  </StyledTabs>
 );
};

Upvotes: 20

Related Questions