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

Question

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

import Star from './star.svg'

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

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

Answer 1

Parcel2 提供了@parcel/transformer-svg-react插件来完成此任务。

您需要执行以下操作：

1. 安装它：

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

2. .parcelrc在项目的根目录添加一个文件，定义使用此插件的命名管道：

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

   （该"..."条目实际上应该输入到.parcelrc文件中 - 它告诉parcel“像往常一样处理这些类型的资产，只有在完成后，才将其转换为反应组件。”）

   更新（5/2022）我添加了该"jsx:*": ["..."]行，目前看来这是避免此错误的必要解决方法。

   当前的另一个“问题”是，如果您想要转换为 React 组件的 SVG 文件包含内联样式标签（例如<path style="fill:red" ...>，您将遇到此错误。为了避免它，您需要通过以下方式@parcel/transformer-svg从管道中删除插件）修改要读取的第一条变压器线"jsx:*.svg": ["@parcel/transformer-svg-react"]（即删除...）。

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

   import Star from 'jsx:./star.svg'
   
   const App = () => (
     <div>
       <Star />
     </div>
   )
   

4. （可选，如果您使用 TypeScript）。jsx:通过使用通配符模块声明让 TypeScript 了解命名管道。在d.ts属于打字稿项目一部分的文件中，写入以下内容：

   declare module "jsx:*.svg" {
     import { ComponentType, SVGProps } from "react";
     const SVGComponent: ComponentType<SVGProps<SVGSVGElement>>;
     export default SVGComponent;
   }
   

请参阅包裹 2 文档。