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