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

Posted 2023-02-23

【中文标题】如何使用 Parcel 2 在 React 中使用 SVG 内联？

【英文标题】：How do you use an SVG inline in React using Parcel 2?

【发布时间】：2020-09-08 16:48:44

【问题描述】：

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

import Star from './star.svg'

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

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

【问题讨论】：

你试过了吗？ v2.parceljs.org/getting-started/migration/…

【参考方案1】：

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

这是你需要做的：

安装它：

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

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

  "extends": "@parcel/config-default",
  "transformers": 
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  

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

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

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

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

见parcel 2 documentation。