以前在 Parcel v1 中你可以只使用类似 @svgr/parcel-plugin-svgr
的东西。包裹插件。这将使您能够像使用 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
文件中 - 它告诉包裹“像往常一样处理这些类型的 Assets ,只有在完成之后,才将其转换为 react 组件。”)import Star from 'jsx:./star.svg'
const App = () => (
<div>
<Star />
</div>
)
见 parcel 2 documentation .
关于reactjs - 您如何使用 Parcel 2 在 React 中使用内联 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61944964/