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

Question

Previously in Parcel v1 you could just use something like the @svgr/parcel-plugin-svgr plugin for Parcel. This would give you the ability to use SVGs inline like when using CRA:

import Star from './star.svg'

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

Can anyone help figure out a way to do this in Parcel 2?

Answer 1

Parcel2 provides the @parcel/transformer-svg-react plugin to accomplish this.

Here's what you need to do:

1. Install it:

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

2. Add a .parcelrc file at the root of your project that defines a named pipleine that uses this plugin:

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

   (The "..." entry should actually be typed into the .parcelrc file - it tells parcel "process these kinds of assets as usual, and only after you are done, transform it into a react component.")

3. Use the named pipeline in your import statements:

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

See parcel 2 documentation .