多个 SVG 图标作为一个组件？答案

【问题标题】：Multiple SVG icons as one component?多个 SVG 图标作为一个组件？
【发布时间】：2021-11-29 14:14:05
【问题描述】：

我目前可以在 React-Native（打字稿）中编写 SVG。这使我可以将它们称为单独的反应原生组件。这是我目前可以做的一个虚构的例子：

<View>
    <BackArrow 
         color ="red"
         width = {10}
         height = {10}
    />
</View>

但是，我想要的是一个“图标”类型，其中包含一组可以输出 SVG 的公认名称。这是我想返回的一个示例，它会给出相同的输出：

<View>
    <Icon
     name = "backArrow"
     color = "red"
     width = {10}
     height = {10}
    />
</View>

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

我见过的一种方法是在你的图标组件中使用延迟加载的映射函数

const icons = {
 backArrow: <BackArrow />
}

const Icon = ({name, ...otherProps}) => React.createElement(
  icons[name],
  [...otherProps],
  null
)

【讨论】：