Home > Net >  How to use React Icons with an icon inside the tag
How to use React Icons with an icon inside the tag

Time:03-30

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.

CodePudding user response:

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.

CodePudding user response:

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} />
}
  • Related