npm 包 browserify-svg 使用教程

介绍

browserify-svg 是一个可以将 SVG 文件转换为 JavaScript 模块的 npm 包。通过使用该包，我们可以将 SVG 图标嵌入到我们的前端项目中，再也不用手动复制粘贴 SVG 代码了。

安装

使用 npm 安装：

npm install browserify-svg

使用

1. 在代码中引入 SVG

var logo = require('./logo.svg');

2. 在 HTML 中使用 SVG

<div class="logo">
    <script>
        var logo = require('./logo.svg');
        var svg = logo.replace(/xmlns=".+?"/g, '');
        document.write(svg);
    </script>
</div>

这里我们的 SVG 文件是通过 require 引入的，然后我们将它的字符串内容存储在变量中，并且将 xmlns 属性移除。最后，我们将 SVG 插入到 HTML 中。

3. 在 CSS 中使用 SVG

.logo {
    background: url('./logo.svg') no-repeat;
    background-size: 100px 100px;
}

4. 在 JavaScript 中修改 SVG

var logo = require('./logo.svg');
var svg = logo.replace(/fill="#\w{6}"/g, 'fill="#00ff00"');
document.write(svg);

这里我们将 SVG 的所有填充颜色修改为绿色。

示例代码

SVG 文件（logo.svg）：

<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#FFFFFF" cx="50" cy="50" r="50"></circle>
    <polygon fill="#333333" points="44 40 56 40 50 52"></polygon>
</svg>

在代码中引入 SVG：

var logo = require('./logo.svg');

在 HTML 中使用 SVG：

<div class="logo">
    <script>
        var logo = require('./logo.svg');
        var svg = logo.replace(/xmlns=".+?"/g, '');
        document.write(svg);
    </script>
</div>

在 CSS 中使用 SVG：

.logo {
    background: url('./logo.svg') no-repeat;
    background-size: 100px 100px;
}

在 JavaScript 中修改 SVG：

var logo = require('./logo.svg');
var svg = logo.replace(/fill="#\w{6}"/g, 'fill="#00ff00"');
document.write(svg);

意义

通过将 SVG 图标嵌入到 JavaScript 模块中，我们可以实现更高效的代码管理，减少手工复制粘贴 SVG 代码的麻烦。同时，我们还能够在代码中轻松地修改 SVG 的属性，实现更加灵活的图标定制。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde546d