SVG转字体图标（svgtofont）

安装依赖 svgtofont

svgtofont github

svgtofont 文档

npm i svgtofont -D

创建文件 svgtofont.js

配置参数看着项目改

const svgtofont = require("svgtofont");
const path = require("path");

svgtofont({
    src: path.resolve(__dirname, "svg"),
    dist: path.resolve(__dirname, "font"),
    fontName: "m2",
    css: {
        fontSize: "200px",
        // 样式文件输出路径
        output: "./css",
        // 输出的样式文件类型
        include: "css",
        // 样式文件的文件名
        fileName: "m2-iconfont",
        // 字体文件相对于样式文件的路径
        cssPath: "../font/",
    },
    svgicons2svgfont: {
        // 通过将图标缩放到最高图标的高度来规范化图标。
        normalize: true,
    },
}).then(() => {
    console.log("svg to font done !!!!!!!!!!!!!!!!!!!!!!!!");
});

添加SVG文件

svg 文件夹下存放需要转成字体图标的文件

添加npm脚本

package.json 加上

{
    ...
    "scripts": {
        ...
        "svgtofont": "node ./svgtofont.js",
    },
}

转换图标

执行

npm run svgtofont

转换完成

生成的文件

使用图标

引入生成的字体样式文件 xxx/m2-iconfont.css，然后就可以直接使用了

<i class="m2-tiktok-fill"></i>
<i class="m2-taobao-line"></i>
<i class="m2-blbl"></i>