Добавление svgr в приложение create-react-app через craco

Question

Я хочу использовать плагин svgr webpack с приложением create- react -app, чтобы использовать SVG с SvgIcon MaterialUI.Я использую 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 - обязательная магическая строка.