reactjs - 通过 svgr 进行 SVG 与 React 失败

Question

将其添加到 webpack 配置中:

  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }
    ]
  },

和一个简单的导入组件

import Globe from './Globe.svg'

(...)
<div>
  <Globe />
</div>

导致出现以下错误并硬停止整个页面渲染。

Warning: <data:image/svg+xml;base64,ZnVuY3Rpb24gX2V... (more here)0.=87…
...BkZWZhdWx0IFN2Z0NvbXBvbmVudDs= /> is using incorrect casing. 
Use PascalCase for React components, or lowercase for HTML elements.

Answer 1

这似乎是已知问题 https://github.com/smooth-code/svgr/issues/83 .

我建议包含url-loader。 https://www.smooth-code.com/open-source/svgr/docs/webpack/#using-with-url-loader-or-file-loader

In your webpack.config.js:

{   test: /\.svg$/,   use: ['@svgr/webpack', 'url-loader'], }

In your code:

import starUrl, { ReactComponent as Star } from './star.svg' 
const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)