你如何使用 Parcel 2 在 React 中使用 SVG 内联？

How do you use an SVG inline in React using Parcel 2?

以前在 Parcel v1 中，您可以只使用类似 @svgr/parcel-plugin-svgr Parcel 插件的东西。这将使您能够像使用 CRA 一样使用内联 SVG：

import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

任何人都可以帮忙找出在 Parcel 2 中执行此操作的方法吗？

Parcel2 提供了 @parcel/transformer-svg-react 插件来实现这一点。

这是您需要做的：

安装它：

yarn add @parcel/transformer-svg-react --dev

在项目的根目录添加一个 .parcelrc 文件，定义使用此插件的命名管道：
```
{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
    "jsx:*": ["..."]
  }
}
```
（"..." 条目实际上应该输入 .parcelrc 文件 - 它告诉 parcel “像往常一样处理这些类型的资产，只有在你完成后，才将其转换为反应组件。”)

更新 (5/2022) 我添加了 "jsx:*": ["..."] 行，目前这似乎是避免 this bug.[=29 的必要解决方法=]
当前的另一个“陷阱”是，如果您要转换为 React 组件的 SVG 文件包含内联样式标签（例如 <path style="fill:red" ...>，您将运行转换为 this bug . 为避免这种情况，您需要通过将第一条转换器线修改为 "jsx:*.svg": ["@parcel/transformer-svg-react"]（即删除 ...）来从管道中删除 @parcel/transformer-svg 插件。

在导入语句中使用命名管道：

import Star from 'jsx:./star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

（可选，如果您使用 TypeScript）。使用 wildcard module declaration 让 TypeScript 知道 jsx: 命名管道。在作为打字稿项目一部分的 d.ts 文件中，写下：
```
declare module "jsx:*.svg" {
  import { ComponentType, SVGProps } from "react";
  const SVGComponent: ComponentType<SVGProps<SVGSVGElement>>;
  export default SVGComponent;
}
```

参见 parcel 2 documentation。