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

Question

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

import Star from './star.svg'

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

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

Answer 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 文件中 - 它告诉包裹“像往常一样处理这些类型的 Assets ，只有在完成之后，才将其转换为 react 组件。”)

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

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

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

见 parcel 2 documentation .