Добавление svgr для создания-реакции-приложения через craco - PullRequest
Новая
       48

Добавление svgr для создания-реакции-приложения через craco

1 голос
/ 05 февраля 2020

Я хочу использовать плагин svgr для веб-пакетов с create-Reaction-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.

My 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?

1 Ответ

2 голосов
/ 05 февраля 2020

Похоже, что CRA поддерживает конвертирование SVG по умолчанию, что делает craco + svgr избыточным. 

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

GoogleLogo теперь является компонентом.

ReactComponent - требуемый маги c строка.

...