通过CRACO将服务器添加到创建-反应-应用程序 [英] Adding svgr to create-react-app via craco

问题描述

我想使用svgr's webpack pluginwith create-action-appuse SVGs with MaterialUI's SvgIcon.我正在使用craco将服务器添加到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？

推荐答案

看起来CRA默认支持转换SVG，导致CRACO+svgr冗余。

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

GoogleLogo现在是组件。

ReactComponent是必需的魔术字符串。

这篇关于通过CRACO将服务器添加到创建-反应-应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！