通过 craco 添加 svgr 到 create-react-app
Adding svgr to create-react-app via craco
我想使用 svgr's webpack plugin with create-react-app to use SVGs with MaterialUI's SvgIcon. I'm using 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
是必需的魔术字符串。
我想使用 svgr's webpack plugin with create-react-app to use SVGs with MaterialUI's SvgIcon. I'm using 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
是必需的魔术字符串。