svgr 是什么？

svgr 是一个将 svg 转换成 React 组件的通用工具。它可以将 svg 转换成 jsx 代码，这样你就可以在 React 项目中使用 svg 图标了。

例如 svg 文件代码

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

转换成以下组件：

import * as React from 'react';
const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
);
export default SvgComponent;

用 rollup 配合 @svgr/rollup 插件打包后，发现 svg 的属性丢失了，比如 width、height、viewBox 等。

通过 svgr 的官方文档查找，得知有一个选项是 svgoConfig，只需要在 rollup.config.ts 里面配置如下即可保留 svg 的属性。

{
  plugins: [
    svgr({
      svgoConfig: {
        plugins: [
          {
            name: 'remove-view-box',
            removeViewBox: false
          }
        ]
      }
    });
  ]
}