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

IT技术 reactjs svg parceljs
2021-05-27 11:42:32

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

import Star from './star.svg'

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

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

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“像往常一样处理这些类型的资产,只有在你完成之后,才将它转换成一个react组件。”)

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

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

请参阅parcel 2 文档