在前端开发中，使用 SVG 可以很好地实现图形绘制和动画效果，但是在打包过程中需要使用 rollup，而 rollup 默认并不支持将 SVG 作为模块导入。为了解决这个问题，我们可以使用 rollup-plugin-svg 进行打包。
本篇文章将详细介绍 rollup-plugin-svg 的安装与使用，并提供示例代码以供参考。
安装
使用 npm 进行安装：
--- ------- ----------------- ----------
使用
在 rollup 的配置文件中，添加 rollup-plugin-svg 插件：
-- ----------------
------ --- ---- --------------------
------ ------- -
-- ---
-------- -
-----
-
-添加完插件后，在代码中可以像导入其他模块一样导入 SVG 文件：
------ --- ---- --------------------- ----------------- -- -- --- --
如果需要将 SVG 文件作为模块导出，可以使用 rollup-plugin-export-globals 插件：
-- ----------------
------ --- ---- --------------------
------ - ------ - ---- -----------------------
------ ------- ---- -------------------------------
------ ------- -
-- ---
-------- -
------
---------
---------
-------- -------------
-------- --------------------
-------- --------
----------- ----------
--------- -------------
--
-
-上面的配置中，我们将 SVG 文件统一导出为 myIcons 对象，并将其保存为 my-icons.js 文件。
示例
下面是一个示例，我们将多个 SVG 文件作为模块导入，然后在 HTML 中使用：
-- -------- ------ --- ---- ------------------ ------ --- ---- ------------------ ---------------------------------------- - ---- ---------------------------------------- - ----
---- ---------- --- ---- --------------- ---- --------------- ------- ------------------------------
其中，"./icons/cat.svg" 和 "./icons/dog.svg" 是两个 SVG 文件的路径，使用 rollup-plugin-svg 插件转换后，它们会变成对象。在 HTML 中，我们可以直接将对象赋值给元素的 innerHTML 属性，从而实现将 SVG 图标渲染到页面上的目的。
总结
rollup-plugin-svg 是一个十分实用的插件，使用它可以将 SVG 文件作为模块导入，使代码更加简洁，也方便了我们在实现图形绘制和动画效果时的开发工作。通过本文的介绍，您已经掌握了这个插件的安装和使用方法，希望本文可以帮到您！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57119