Snippet on how to dynamically import icons based on a string in React

dynamic-icon-react.md

First install the iconify library or follow this guide

npm install --save-dev @iconify/react

// using yarn
yarn add --dev @iconify/react

Next import the component from the iconify library

import { Icon } from '@iconify/react';

Display the icon by passing in the icon name into the icon parameter

Let's say you have an array of icons, using template literals, you can define these icons without having to import them individually.

Social icons coming from Boxicons Logo

const social = [github, linkedin, twitter, youtube];

function Social() {
  return(
    <div>
      {social.map((string) => (
        <Icon icon={`bxl:${string}`} width={30} height={30} aria-hidden="true" />
      ))}
    </div>
  );
}

export default Social