[英]Is there a way to import from react-icons dynamically by iterating through an array?
This will give an error but hopefully it shows pretty much but I want to do.这将给出一个错误,但希望它显示得相当多,但我想做。 I want to have a bunch of icons in my component (later on they will be links) but I'm wondering if there's a way to bring them in dynamically rather than hard-coding them.
我想在我的组件中有一堆图标(稍后它们将是链接),但我想知道是否有办法将它们动态引入而不是对它们进行硬编码。
const icons = [
{
title: 'BsGithub',
path: 'bs'
}, {
title: 'BsStackOverflow',
path: 'bs'
}, {
title: 'BsLinkedin',
path: 'bs'
},
]
export default icons
import icons from '../../data/icons'
const MyComponent = () => {
const getIcon = ({ title, path }) => {
import { title } from `react-icons/${path}`
return(
<h1>
<{title} />
</h1>
)
}
return(
<div>
{icons.map(icon => getIcon(icon))}
</div>
)
}
Here was my final solution, omitting all styling-related code.这是我的最终解决方案,省略了所有与样式相关的代码。
import { BsGithub, BsStackOverflow, BsLinkedin } from 'react-icons/bs'
const icons = [
{
picture: <BsGithub />,
link: '[insert link here]'
}, {
picture: <BsStackOverflow />,
link: '[insert link here]'
}, {
picture: <BsLinkedin />,
link: '[insert link here]'
}
]
export default icons
import icons from '../../data/icons'
const MyComponent = () => {
const getIcon = ({ picture, link }) => {
return(
<a href={link} target='_blank'>{picture}</a>
)
}
return(
<div>
{icons.map(icon => getIcon(icon))}
</div>
)
}
export default MyComponent
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.