将 SVG 导入 CRA

在 Create React App (以下简称 CRA) 中使用 SVG 文件时，可能会遇到无法正确导入的问题。本文将提供一些解决方案。

1. 使用 React 组件

将 SVG 文件导入为 React 组件是一种常见的解决方案。可以使用 svgr 来实现这个过程。首先，需要在 CRA 项目中安装 svgr。

npm install --save-dev @svgr/cli @svgr/webpack

然后，为 SVG 文件创建一个React组件：

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* 使用SVG组件 */}
      <Logo />
    </div>
  );
}

export default App;

在这个例子中，我们将一个 SVG 文件导入为了一个名为 Logo 的组件。注意，文件名前缀必须是 ReactComponent。

2. 加载 SVG 文件

如果你只需要加载 SVG 文件而不将其包装为 React 组件，你可以使用 url-loader 或 file-loader来处理 SVG 文件。

在 CRA 中，默认配置中已经包含了 url-loader 和 file-loader，所以你无需安装它们。只需要在 src 文件夹中添加 SVG 文件，然后按以下方式导入即可：

import logo from './logo.svg';

function App() {
  return (
    <div>
      {/* 使用SVG文件 */}
      <img src={logo} alt="Logo" />
    </div>
  );
}

export default App;

在这里，我们使用了 img 标签，用于显示 SVG 图片。请注意，这种方式也适用于其他类型的图片文件。

总结

以上是在 CRA 中导入 SVG 文件的两种常见方式。使用 svgr 转换 SVG 文件为 React 组件、file-loader 或 url-loader 加载 SVG 文件 都是可行的方法。具体选择应根据应用程序的要求和个人喜好而定。