微信小程序批量导入iconfont下的SVG图片

前几天在写微信小程序，由于小程序不直接支持SVG标签，所以后来使用PNG作为素材。但是在发布的时候提示包体积超过2M，为了优化包体积与加载速度，于是我开始想办法处理。

从 https://www.iconfont.cn/ 下载的素材包有三种引入方式，其中Symbol是支持彩色的，其原理就是通过js动态生成SVG标签。

但小程序又不支持SVG，所以不能使用Symbol。

后来经过了解决定使用background-image: url(data:image/svg+xml;base64,....);方式引入，也就是将SVG文件编码为DataURL，然后通过背景图片的方式引入

由于SVG文件过多，我用NodeJS 写了一个批量处理的脚本

脚本代码：

var fs = require("fs");
var path = require("path"); 
//SVG 文件目录
let dirPath = "./svg/";
let styleStr = "";
let htmlStr = "";

let dirs = fs.readdirSync(dirPath);
if (dirs.length > 0) {
    dirs.forEach(function (filename) {
        let filedir = path.join(dirPath, filename);
        if (fs.statSync(filedir).isFile()) {
            var bData = fs.readFileSync(filedir);
            var base64Str = bData.toString('base64');
            var datauri = 'data:image/svg+xml;base64,' + base64Str;
            let className = filename.split(".")[0];
            let iconStyle = `
            .${className}{
                background-image: url("${datauri}");
                background-size: cover;
        }`;
            styleStr = styleStr + "\r\n" + iconStyle + "\r\n";
            htmlStr = htmlStr + `<div class="box"><div class="svg-icon ${className}"></div><div>${className}</div></div>`;
        }
    });
}
let demoHtml = `
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="./svgicon.css">
    <style>.box{
        width: 200px; 
        margin: 20px 40px;
        float: left;
        text-align: center;
    }
        .svg-icon {
            display: inline-block;
            width: 60px;
            height: 60px;
        }
    </style>
</head>

<body> 
${htmlStr}
</body>

</html>
`;

fs.writeFileSync("svgicon.css", styleStr);
fs.writeFileSync("demo.html", demoHtml);

脚本会在目录下生成一个demo.html与svgicon.css

demo.html是html演示

小程序里面引入svgicon.css，然后参考demo.html将div标签改成view标签就好了