在前端开发中，SVG 是常见的图形格式，经常被用于图标、图表等的绘制。而 SVG 的优势之一就是它可以无损缩放。但是在实际使用 SVG 的时候，我们经常会遇到一个问题：在不同尺寸的容器中展示 SVG 时，SVG 的视觉效果可能会变形，因为 SVG 默认是根据像素进行绘制的。为了解决这个问题，我们需要将 SVG 中的尺寸都换算成 em 的单位，使其可以随容器的字体大小而自适应缩放。而这个过程可以很方便地通过 npm 包 @svgr/babel-plugin-svg-em-dimensions 来实现。
@svgr/babel-plugin-svg-em-dimensions 简介
@svgr/babel-plugin-svg-em-dimensions 是一个 Babel 插件，可以将 SVG 中的所有尺寸单位都转换成 em。这个插件需要和 @svgr/core 一起使用，@svgr/core 是一个将 SVG 文件转换成 React 组件的工具库。在使用 @svgr/babel-plugin-svg-em-dimensions 时，我们需要先把 SVG 文件转化成 React 组件，然后再通过该插件来将em转换成SVG中的尺寸单位。
@svgr/babel-plugin-svg-em-dimensions 使用教程
步骤一：安装插件
我们首先需要使用 npm 安装该插件。
npm install @svgr/babel-plugin-svg-em-dimensions --save-dev
步骤二：配置 Babel
在项目根目录下，我们需要新建一个名为 .babelrc 的文件，然后在文件中增加以下配置：
-- -------------------- ---- -------
-
---------- --------------------- ---------------------- ----------------------------
---------- -
-
---------------------------------------
-
------------- ---------
--------- --
-
-
-
-- presets：这里是我们常见的 Babel 配置，表示我们需要编译的语言。
- plugins：这里引入了 @svgr/babel-plugin-svg-em-dimensions 插件，它是一个数组，表示一些插件的使用。
- outputPath：SVG 转换后的路径，默认为 svgr（即与插件同名的文件夹），这里我们自定义了输出文件夹名称为 icons。
- emSize：这是一个整数值，表示 SVG 中的尺寸单位将被转换为多少 em，默认值为 16。在实际使用中，你可以根据你的字体大小来自由调整这个值。
步骤三：创建 SVG
在我们的项目中，创建一个 SVG 文件，比如叫做 icon.svg。
我们可以采用以下格式来书写 SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000" d="M20 15.51c-.464 0-.926.056-1.371.163-.38-.512-.864-.924-1.435-1.204l.98-.98c.52-.52.52-1.36 0-1.88L16.13 9.84c-.52-.52-1.36-.52-1.88 0L9.84 14.25c-.52.52-.52 1.36 0 1.88l.98.98c-.572.28-1.055.692-1.435 1.204.445-.107.907-.163 1.371-.163.464 0 .926.056 1.371.163.38.512.864.924 1.435 1.204l-.98.98c-.52.52-.52 1.36 0 1.88l4.38 4.38c.52.52 1.36.52 1.88 0l4.38-4.38c.52-.52.52-1.36 0-1.88l-.98-.98c.572-.28 1.055-.692 1.435-1.204-.445.107-.907.163-1.371.163z"/> </svg>
步骤四：创建 React 组件
使用 @svgr/core 将 SVG 文件转换成 React 组件后再使用@svgr/babel-plugin-svg-em-dimensions 插件来完成我们需要的操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------
----- ---- - -- -- -
-----
------- ------------ --
------
--
------ ------- -----步骤五：完成
现在我们可以将 SVG 图标作为 React 组件导入到我们的项目中，同时也实现了 SVG 尺寸的自适应缩放。
示例代码
你可以参考以下代码，在你的项目中实现自适应 SVG 图标。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000" d="M20 15.51c-.464 0-.926.056-1.371.163-.38-.512-.864-.924-1.435-1.204l.98-.98c.52-.52.52-1.36 0-1.88L16.13 9.84c-.52-.52-1.36-.52-1.88 0L9.84 14.25c-.52.52-.52 1.36 0 1.88l.98.98c-.572.28-1.055.692-1.435 1.204.445-.107.907-.163 1.371-.163.464 0 .926.056 1.371.163.38.512.864.924 1.435 1.204l-.98.98c-.52.52-.52 1.36 0 1.88l4.38 4.38c.52.52 1.36.52 1.88 0l4.38-4.38c.52-.52.52-1.36 0-1.88l-.98-.98c.572-.28 1.055-.692 1.435-1.204-.445.107-.907.163-1.371.163z"/> </svg>
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------
----- ---- - -- -- -
-----
------- ------------ --
------
--
------ ------- -----总结
@svgr/babel-plugin-svg-em-dimensions 可以帮助我们解决在不同尺寸容器中展示 SVG 时可能会遇到的变形问题，它通过将 SVG 中的尺寸都换算成 em 的单位，达到了随字体大小自适应的效果。这在实际的前端开发项目中是非常实用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/svgr-babel-plugin-svg-em-dimensions