通过 craco 将 svgr 添加到 create-react-app

Question

我想使用 svgr's webpack plugin 和 create-react-app 到 use SVGs with MaterialUI's SvgIcon. 我正在使用 craco 将 svgr 添加到 Webpack 的配置中。

目前，无论何时应该渲染 SVG，都会引发以下错误：

Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/googlelogo.03ad8507.svg') is not a valid name.

我的 craco.config.js：

const CracoAlias = require("craco-alias");

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

如何正确嵌入 SVG？

Answer 1

看起来 CRA 默认支持转换 SVG，从而使 craco+svgr 变得多余。

import { ReactComponent as GoogleLogo } from "../assets/images/googlelogo.svg";

GoogleLogo 现在是一个组件。

ReactComponent 是必需的魔术字符串。