找不到如何在React中导入svg图标库

Question

我搜寻了很多Stackoverflow问题或搜索了文章。但是我只能找到npm软件包，并且我想避免在Project中使用太多软件包。

我所需要的只是一些指导，文章，博客文章，链接，以及任何可以帮助我实现自己想要的东西的东西。

我想要的

在React中动态导入50多个svg图标作为组件；准备使用。
原因是当以相同的名称替换svg图标时，它会立即更新我的应用程序中的所有图标版本。

附加：如果有可能将其打包以用于其他项目；太神奇了。

我目前正在做什么

下面是我目前正在做的事情；但这对于50个可能每天更新的图标来说是一项疯狂的工作。

import React from 'react';

const getViewBox = name => {
  switch (name) {
    case 'mouseScroll':
    return '0 0 70 130'
    default:
      return '0 0 50 50';
  }
};

const icons = (name, props) => {
  switch (name) {
    case 'loading':
      return (
        <g>
          <path {...props} d="M25,50C11.2,50,0,38.8,0,25S11.2,0,25,0c0.8,0,1.5,0.7,1.5,1.5S25.8,3,25,3C12.9,3,3,12.9,3,25s9.9,22,22,22
            c12.1,0,22-9.9,22-22c0-0.8,0.7-1.5,1.5-1.5S50,24.2,50,25C50,38.8,38.8,50,25,50z"/>
        </g>
      );
    case 'mouseScroll':
      return (
        <g fill="none" fill-rule="evenodd">
          <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="5" rx="36"/>
          <circle className="scroll" cx="38.5" cy="33.5" r="6.5" fill="#FFF"/>
        </g>
      );
    default:
      return '';
  }
};

const SVGIcon = ({
  name = '',
  style = {},
  fill = 'currentColor',
  viewBox = '',
  width = '20px',
  className = 'icon icon' + name,
  height = '20px'
}) => (
  <svg
    width={width}
    style={style}
    height={height}
    className={className}
    xmlns='http://www.w3.org/2000/svg'
    viewBox={viewBox || getViewBox(name)}
    xmlnsXlink='http://www.w3.org/1999/xlink'
  >
    {icons(name, { fill })}
  </svg>
);

export default SVGIcon;

什么几乎帮助了我

在这个Stackoverflow问题中，是用户skylize的答案吗？
How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?

但是这里的svg仅仅是要在标签中使用的文件路径

Answer 1

使用svgr，您可以将svg作为组件导入。

如果要避免导入软件包，而是“重新创建轮子”，请查看lib的源代码，您会发现一些很好的提示。

在repo的svgr / core内部寻找灵感，代码是自我记录的，易于理解。