SVG 与 React 通过 svgr 失败

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

在你的 webpack.config.js 中：

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

在你的代码中：

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