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

Question

以前在 Parcel v1 中，您可以使用类似 @svgr/parcel-plugin-svgr 的 Parcel 插件。这将使您能够像使用 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 文件，该文件定义了一个使用此插件的命名管道：

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

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

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

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

见parcel 2 documentation。