在 React 中插入映射的 SVG

Question

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

所以我有大约一百个 svgs，每个都放入函数中。由于它们太多了，我宁愿不碰这个文件，但如果这是唯一的解决方案，此时我愿意做任何事情。它们的格式如下，除了更多的 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} ，它们就会呈现。如何获取被映射的图标以进行渲染？可以这么说，我也很确定它们“在那里”，因为我可以将鼠标悬停在它们应该在的位置上，并且在悬停时大约会改变背景颜色。

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

并且，这可能是一个完全独立的问题，但由于这是我一直在研究的与解决此问题相关的问题，因此我将其包括在内。我在这个项目中使用reactstrap，并且是否可以在reactstrap中制作一个“选择器”，例如下拉按钮或选项将显示在表格而不是列表中的表单（垂直列表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>
  );
})}

Answer 2

在尝试映射反应本机的图标时输入代码，对于任何可能发现这有用的人，这就是我发现对我有用的东西，对本线程中另一篇文章中的代码进行了小编辑：

import Location from '../assets/svg/location.svg';

    const Icon = props => {
          const getIcon = {
            location: Location,
          };
        
          const IconComponent = getIcon[props.name];
        
          return <IconComponent />;
        };
        
        export default Icon;

稍后您可以将 name="location" 作为 prop 传递给您的 Icon 组件