如何用craco在ReactJS中导入SVG？

Question

当我在我的react应用程序中使用craco时，我很难导入SVG。

建议使用@svgr/webpack，但我不知道如何将它放入craco.config.js中

根据这，我当前的设置(我的prob不应该遵循某人的配置，不工作，并期望它能够工作)，它不能工作：

// craco.config.js
const CracoAlias = require("craco-alias");

module.exports = {
   plugins: [
     {
        plugin: CracoAlias,
        options: {
           source: "tsconfig",
           baseUrl: "./src",
           tsConfigPath: "./tsconfig.paths.json"
        }
     },
    ],
    webpack: {
       configure: (config, { env, paths }) => {
         config.module.rules.push({
           test: /\.svg$/,
           use: ["@svgr/webpack"]
         });
         return config;
       }
     }
};

craco.config.js webpack文档是这里，但是如果没有具体的例子，它会让我很困惑。

还要注意:编写import {ReactComponent as mySvg} from "./mySvg.svg"不起作用，因为它不承认它是ReactComponent。

如果我尝试通过import mySvg from "./mySvg.svg"直接导入，那么类型记录就无法识别该文件。

我目前正在做的是将svg放入一个React组件中，并使用它，但是每次这样做都是一场噩梦。我也把它放在@types/custom.d.ts中，但是当放入<img src={mySvg} />时，它仍然不起作用

// @types/custom.d.ts
declare module "*.svg" {
    const content: any;
    export default content;
  }

Answer 1

从“./reactComponent/GoogleLogo/googlelogo.svg”导入{ GoogleLogo}；

GoogleLogo是组件，reactComponent是必需的魔术字符串。

我在通过craco将svgr添加到创建-react app中。中找到了修复您的问题