gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 18:40:21 35 4
gpt4 key购买 nike

我想用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?

最佳答案

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

import { ReactComponent as GoogleLogo } from "../assets/images/googlelogo.svg";
GoogleLogo现在是一个组件。
ReactComponent是必需的魔法字符串。

关于webpack - 通过 craco 将 svgr 添加到 create-react-app,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60074103/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com