在 React 中插入映射的 SVG

Question

我正在做我的第一个更大的 React 项目，我已经花了一天时间解决这个看似简单的问题。请原谅我的术语错误。

所以我有大约一百个 svg，每个都放入函数中。由于它们太多了，我宁愿不碰这个文件，但如果这是唯一的解决方案，在这一点上我愿意做任何事情。它们的格式如下所示，除了更多的 svg 代码，为 JSX 格式。

export function Example(props) {
  return (
    <svg viewBox='0 0 100 100' {...props}>
      <g fill='#000000'>
        <path d='long path here' />
      </g>
    </svg>
  );
}

这些都放在一个选择器中，它本身花了一整天的时间来计算它。问题是，我试图通过它们映射以选择一个图标，并在映射后让它们呈现，但我不知道如何。

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
    < Example>
    </IconMap>
  );
})}

因此，如果我只写，而不是 <{icon /> 或只是 {icon}，它们就会呈现。我怎样才能让被映射的图标呈现出来？我也很确定它们 "there" 可以这么说，因为我可以将鼠标悬停在它们应该在的位置上，并且在悬停时适当地改变背景颜色。

我已经尝试了各种方法，如果我将我的图标文件更改为 return svg 数据作为变量，那么我会有一个单独的图标组件来渲染它，所以我基本上会写，但感觉它应该是一种更简单的方法，我不必重新编写数百个图标？

而且，这可能是一个完全独立的问题，但由于这是我一直在研究的与解决此问题相关的问题，因此我将其包括在内。我正在为这个项目使用 reactstrap，如果有可能在 reactstrap 中制作一个 "picker"，例如下拉按钮或选项将显示在 table 而不是列表（100 多个图标的垂直列表需要大量滚动），我很乐意对整个内容进行硬编码，只是让它与我的其余代码一起在 reactstrap 中工作。

非常感谢，干杯！

Answer 1

不确定我是否正确理解了您的问题，您是否尝试动态生成图标？如果是这样，这是您可以做到的一种方式

import Icon1 from 'icons/icon1.svg';
import Icon2 from 'icons/icon2.svg';

const Icon = (props) => {
  const getIcon = name => {
    return {
      icon1: Icon1,
      icon2: Icon2,
    }
  }

  const IconComponent = getIcon(props.name);
  return (
    <IconComponent />
  );
}

然后你像这样在你的组件中使用它

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
      <Icon name={icon.name}>
    </IconMap>
  );
})}

在 React 中插入映射的 SVG

Insert mapped SVGs in React

javascript

svg

reactjs

reactstrap