使用没有图标名称标签的反应图标
Using react-icons without icon name tag
我正在使用 react-icons。
在文档中的正常用法是这样的:
import { FaBeer } from 'react-icons/fa';
<FaBeer />
但是我不能这样使用,因为图标名称来自道具。我需要这样使用:
<Icon name={props.icon} />
我该如何解决这个问题?
您应该实现一个包装器,例如:
import { FaBeer, FaAdobe, ICON_NAME } from 'react-icons/fa';
const ICONS = {
[ICON_NAME.FaBeer]: <FaBeer/>,
[ICON_NAME.FaAdobe]: <FaAdobe/>
}
const Icon = ({name}) => <>{ICONS[name]}</>
我正在使用 react-icons。
在文档中的正常用法是这样的:
import { FaBeer } from 'react-icons/fa';
<FaBeer />
但是我不能这样使用,因为图标名称来自道具。我需要这样使用:
<Icon name={props.icon} />
我该如何解决这个问题?
您应该实现一个包装器,例如:
import { FaBeer, FaAdobe, ICON_NAME } from 'react-icons/fa';
const ICONS = {
[ICON_NAME.FaBeer]: <FaBeer/>,
[ICON_NAME.FaAdobe]: <FaAdobe/>
}
const Icon = ({name}) => <>{ICONS[name]}</>