在前端开发中，如果需要在网页中使用 SVG 图片，通常的方式是使用 <img> 标签或使用 CSS 的 background-image 属性。但是，这些方式都有它们的缺点，比如不能动态地改变 SVG 图片的颜色和大小等，因此我们需要使用其他的方式来更好地处理 SVG 图片。
在此，我们介绍一款优秀的 npm 包：@ponday/rollup-plugin-svg。该包是一个可以将 SVG 图片转换成 base64 编码的 rollup 插件，它支持将 SVG 文件作为模块导入，并直接在代码中使用，而不需要将其作为文件进行加载。
如何使用 @ponday/rollup-plugin-svg
- 安装
首先，我们需要在项目中安装 @ponday/rollup-plugin-svg：
npm install --save-dev @ponday/rollup-plugin-svg
- 配置
在使用该插件之前，我们需要在 rollup 的配置文件中配置该插件。例如，假设我们的 rollup 配置文件为 rollup.config.js，该文件位于项目根目录下，我们可以进行如下配置：
-- -------------------- ---- -------
------ --- ---- ----------------------------
------ ------- -
------ ---------------
------- -
------- ------
----- ----------------
--
-------- -
----- ------- ---- --
-
--在这个配置中，我们将 @ponday/rollup-plugin-svg 导入到配置文件中，并在 plugins 数组中添加配置来使用该插件。这里，我们只设置了一个选项：base64: true，它代表将 SVG 图片转换成 base64 编码。
- 使用
接下来，在你的 JavaScript 代码文件中，你可以通过导入 SVG 文件来使用它。假设我们的 SVG 文件在src/assets/icons/logo.svg 中，代码如下：
import logo from './assets/icons/logo.svg'; console.log(logo); // 打印出 base64 编码
在这个代码中，我们使用 ES6 的 import 语句来导入 SVG 文件，然后使用 console.log 来查看转换得到的 base64 编码。
示例
完整示例代码如下：
rollup.config.js：
-- -------------------- ---- -------
------ --- ---- ----------------------------
------ ------- -
------ ---------------
------- -
------- ------
----- ----------------
--
-------- -
----- ------- ---- --
-
--src/index.js：
import logo from './assets/icons/logo.svg';
console.log(logo); // 打印出 base64 编码
document.getElementById("svg-container").innerHTML = logo;index.html：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ------- ------ ---- ------------------------- ------- ------------- ------------------------------ ------- -------
在运行完上述代码后，我们可以在浏览器控制台中查看到转换后的 base64 编码，并在页面中展示该 SVG 图片。
结语
@ponday/rollup-plugin-svg 是一款十分实用的前端工具，它能够帮助我们更好地处理 SVG 图片，使用起来也十分方便。希望本文对大家能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226de