以前在 Parcel v1 中,您可以只使用@svgr/parcel-plugin-svgr
Parcel 插件之类的东西。这将使您能够像使用 CRA 一样使用内联 SVG:
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
任何人都可以帮助找出在 Parcel 2 中执行此操作的方法吗?
以前在 Parcel v1 中,您可以只使用@svgr/parcel-plugin-svgr
Parcel 插件之类的东西。这将使您能够像使用 CRA 一样使用内联 SVG:
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
任何人都可以帮助找出在 Parcel 2 中执行此操作的方法吗?
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“像往常一样处理这些类型的资产,只有在你完成之后,才将它转换成一个react组件。”)
在导入语句中使用命名管道:
import Star from 'jsx:./star.svg'
const App = () => (
<div>
<Star />
</div>
)
请参阅parcel 2 文档。