介绍
browserify-svg 是一个可以将 SVG 文件转换为 JavaScript 模块的 npm 包。通过使用该包，我们可以将 SVG 图标嵌入到我们的前端项目中，再也不用手动复制粘贴 SVG 代码了。
安装
使用 npm 安装：
--- ------- --------------
使用
1. 在代码中引入 SVG
--- ---- - ----------------------
2. 在 HTML 中使用 SVG
---- -------------
--------
--- ---- - ----------------------
--- --- - ---------------------------- ----
--------------------
---------
------这里我们的 SVG 文件是通过 require 引入的，然后我们将它的字符串内容存储在变量中，并且将 xmlns 属性移除。最后，我们将 SVG 插入到 HTML 中。
3. 在 CSS 中使用 SVG
----- -
----------- ----------------- ----------
---------------- ----- ------
-4. 在 JavaScript 中修改 SVG
--- ---- - ---------------------- --- --- - ------------------------------ ------------------ --------------------
这里我们将 SVG 的所有填充颜色修改为绿色。
示例代码
SVG 文件（logo.svg）：
---- ------------- -------------- ---------- - --- ---- ------------- -----------------------------------
------- -------------- ------- ------- ----------------
-------- -------------- ---------- -- -- -- -- --------------
------在代码中引入 SVG：
--- ---- - ----------------------
在 HTML 中使用 SVG：
---- -------------
--------
--- ---- - ----------------------
--- --- - ---------------------------- ----
--------------------
---------
------在 CSS 中使用 SVG：
----- -
----------- ----------------- ----------
---------------- ----- ------
-在 JavaScript 中修改 SVG：
--- ---- - ---------------------- --- --- - ------------------------------ ------------------ --------------------
意义
通过将 SVG 图标嵌入到 JavaScript 模块中，我们可以实现更高效的代码管理，减少手工复制粘贴 SVG 代码的麻烦。同时，我们还能够在代码中轻松地修改 SVG 的属性，实现更加灵活的图标定制。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8cccdc64669dde546d