在前端开发中，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 安装该插件。
--- ------- ------------------------------------ ----------
步骤二：配置 Babel
在项目根目录下，我们需要新建一个名为 .babelrc 的文件，然后在文件中增加以下配置：
-
---------- --------------------- ---------------------- ----------------------------
---------- -
-
---------------------------------------
-
------------- ---------
--------- --
-
-
-
-- presets：这里是我们常见的 Babel 配置，表示我们需要编译的语言。
- plugins：这里引入了 @svgr/babel-plugin-svg-em-dimensions 插件，它是一个数组，表示一些插件的使用。
- outputPath：SVG 转换后的路径，默认为 svgr（即与插件同名的文件夹），这里我们自定义了输出文件夹名称为 icons。
- emSize：这是一个整数值，表示 SVG 中的尺寸单位将被转换为多少 em，默认值为 16。在实际使用中，你可以根据你的字体大小来自由调整这个值。
步骤三：创建 SVG
在我们的项目中，创建一个 SVG 文件，比如叫做 icon.svg。
我们可以采用以下格式来书写 SVG：
---- ---------------------------------- ---------- ----------- ---------- - -- ---- ----- ----------- ------ ----------- --------------------------------------------------------------------------- ------------ --------------------------- ------ ----------------- ---- - ------------------------------------ ----------------------- -------------- - -------- ------------------------ ----- ------------------------- ---- - --------- ----------- ------- ---- --------------------------- ------------------------ ---------- ------------------------------------------- ------
步骤四：创建 React 组件
使用 @svgr/core 将 SVG 文件转换成 React 组件后再使用@svgr/babel-plugin-svg-em-dimensions 插件来完成我们需要的操作。
------ ----- ---- --------
------ ------ ---- -------------
----- ---- - -- -- -
-----
------- ------------ --
------
--
------ ------- -----步骤五：完成
现在我们可以将 SVG 图标作为 React 组件导入到我们的项目中，同时也实现了 SVG 尺寸的自适应缩放。
示例代码
你可以参考以下代码，在你的项目中实现自适应 SVG 图标。
---- ---------------------------------- ---------- ----------- ---------- - -- ---- ----- ----------- ------ ----------- --------------------------------------------------------------------------- ------------ --------------------------- ------ ----------------- ---- - ------------------------------------ ----------------------- -------------- - -------- ------------------------ ----- ------------------------- ---- - --------- ----------- ------- ---- --------------------------- ------------------------ ---------- ------------------------------------------- ------
------ ----- ---- --------
------ ------ ---- -------------
----- ---- - -- -- -
-----
------- ------------ --
------
--
------ ------- -----总结
@svgr/babel-plugin-svg-em-dimensions 可以帮助我们解决在不同尺寸容器中展示 SVG 时可能会遇到的变形问题，它通过将 SVG 中的尺寸都换算成 em 的单位，达到了随字体大小自适应的效果。这在实际的前端开发项目中是非常实用的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/svgr-babel-plugin-svg-em-dimensions