我正在使用Create React App构建一个组件库.在我的一些组件中，我像这样导入SVG:
import { ReactComponent as IconClear } from 'icons/clear.svg';
这在开发中起作用，因为我知道CRA支持这样的SVG.
我使用@babel/cli将我的src/lib文件夹转换为dist文件夹，以将库用作 node 包:
rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files
在生产中，这些SVG组件不起作用.我得到的错误是:
错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但GET:UNDEFINED.
我如何使用巴别塔将这些SVG转换成组件？我不想 for each SVG手动创建组件，我想保持SVG标记不变，这样它仍然可以在设计软件中打开.有没有巴别塔预置/插件可以做到这一点？
我能够使用babel-plugin-inline-react-svg套餐完成我所需要的工作.
我只是简单地安装了它:
npm install babel-plugin-inline-react-svg --save-dev个
然后我在我的babel.config.json里加了plugin分.
"plugins": ["inline-react-svg"]
现在，当我运行我的build脚本时，SVG是内联的.
源代码:
import { ReactComponent as IconClear } from 'icons/clear.svg';
……变成了:
var IconClear = function IconClear(props) {
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
d: "M12.59 0 14 1.41 8.41 7 14 12.59 12.59 14 7 8.41 1.41 14 0 12.59 5.59 7 0 1.41 1.41 0 7 5.59z"
}));
};
SVG现在可以在生产中正常工作，不会出现任何错误.