How to use React Icons with an icon inside the tag

Question

I'm trying to use react icons without import the icon of the lib. Is it possible to call the icon and pass the name like <Icon name="FiMenu" /> or <Icon name="FiArrowRight" /> ?

Nothing happened, looks like property Icon does not exists from react-icons.

Answer 1

There is no such component called Icon in the library or in React so you do need to individually import the components.

Follow the documentation: https://github.com/react-icons/react-icons The basic usage is:

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

If you really want to understand what is happening I suggest having a look through the source code.

Answer 2

The not best practice, but you can also create oan object with key (name of icon) and value the icon. So after this import of your icons. Example:

import {FaBeer} from "react-icons/fa"
const icons = {
  "FaBeer": FaBeer
}
export const Icon ({name, ...props} ) => {
  const IconComponent = icons[name]
  return <IconComponent {...props} />
}