React react-icons-kit and get Icons dynamically

Question

How to get Icons dynamically in React using extension React Icon kit? I try to find out the way to add a icon dynamically in a MAP-loop as I get them from array "sociallinks"

here is the part of the code

....
import { Icon } from 'react-icons-kit'
import {facebook} from 'react-icons-kit/feather/facebook';
import {instagram} from 'react-icons-kit/feather/instagram';
import {twitter} from 'react-icons-kit/feather/twitter';
....

// dynamic array from redux store
"sociallinks": [
    {
      "_id": 1,
      "type": "facebook",
      "linkname": "Facebook",
      "link": "https://www.facebook.com/zzzzz/"
    },
    {
      "_id": 2,
      "type": "instagram",
      "linkname": "Instagram",
      "link": "https://www.instagram.com/yyy/"
    },
    {
      "_id": 3,
      "type": "twitter",
      "linkname": "Twitter",
      "link": "https://twitter.com/xxx"
    },
    {
      "_id": 4,
      "type": "youtube",
      "linkname": "Youtube",
      "link": "https://www.youtube.com/user/youtube"
    }
  ]

// problem is here how to markup icon = {xxxxx} from map item.type? item.link and item.linkname works fine.. but not item.type :((( 
<ul>
     {this.props.data.socialLinks.map((item,i) => (
      <li key = {i}> <a href = {item.link}><Icon size={18} icon={item.type} />{item.linkname}</a></li>
       ))  
     } 
</ul>

This is not possible, because this Array is coming from Redux Store and redux Store is getting them from MongoDB — user2544102, Jan 07 '19 at 08:49

score 0 · Answer 1 · answered Mar 07 '23 at 20:36

import { FC } from "react";

import { IconType } from "react-icons/lib";

import * as FaIcons from "react-icons/fa";
import * as MdIcons from "react-icons/md";
import * as HiIcons from "react-icons/hi";

type IconMap = Record<string, IconType>;
type Library = "fa" | "md" | "hi";

interface IDynamicIcon {
  lib: Library;
  icon: string;
  size?: number;
  color?: string;
  style?: React.CSSProperties | undefined;
}

export const DynamicIcon: FC<IDynamicIcon> = ({
  lib,
  icon,
  size = 16,
  color = "#111",
  style,
}) => {
  const Icon: IconType = (returnLibraryIcons(lib) as IconMap)[icon];

  return (
    <Icon size={size} color={color} style={style} />
  );
};

const returnLibraryIcons = (lib: Library) => {
  const LibraryIcons = {
    fa: FaIcons,
    md: MdIcons,
    hi: HiIcons,
  };

  return LibraryIcons[lib];
};

React react-icons-kit and get Icons dynamically

1 Answers1