时间戳

首页 > 解决方案 > How do you use an SVG inline in React using Parcel 2?

reactjs - How do you use an SVG inline in React using Parcel 2?

问题描述

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?

标签： reactjssvgparceljs

解决方案

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 “像往常一样处理这些类型的资产，只有在你完成后，才能将其转换为反应组件。”）

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

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

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

请参阅包裹 2 文档。

推荐阅读