阿里字体图标还原

编程技术
2020-12-13
402

字体图标做啥的就不用说了吧，如果有不清楚的自己google。

自从有了iconfont真的蛮方便，不像以前美工设计好了，图标还得从设计稿抠。

话说，前几天有个字体图标文件不知道放在哪个账户名下，突发奇想是不是可以从图标文件（字体或者svg）还原。网上搜索下，果然已经有人做好了，是从svg提取代码进行还原，下列我将详细介绍字体图标从svg文件还原的过程。

环境要求：本机须安装node，如何安装node请自行google

复制下列代码保存成js文件，比如svg.js

/**
 * 将 iconfont 生成的 svg 文件中的单个图标提取出来
 */

const fs = require('fs');
const path = require('path');

const { resolve } = path;
const { readFile, writeFile } = fs;

// 需要处理的 SVG 文件
const svgPath = '/path/to/your/iconfont.svg';

// 处理 SVG 的形变
const svgTransform = 'transform="translate(0 900)scale(1 -1)"';

// svg 文件模板
const svgTemplate = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1584762969678" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="12392" width="200" height="200"><defs><style type="text/css"/></defs><path glyph-name="__gn__" unicode="__un__" d="__PATH__" ${svgTransform}/></svg>`;

// 输出文件的存储路径
const outputPath = resolve(__dirname, './output/');

readFile(resolve(__dirname, svgPath), 'utf8', (err, res) => {
    if (!err) {
        const iconArray = res.match(/<glyph[^n]*/>/g);
        const unicodeMap = {};
        iconArray.forEach(item => {
            const unicode = item.match(/unicode="&#(d+);"/)[1];
            const className = item.match(/glyph-name="([w-_]+)"/)[1];

            unicodeMap[className] = (+unicode).toString(16);
            var svg = svgTemplate.replace('__PATH__', item.match(/ d="([^"]*)"/)[1]).replace('__gn__',className).replace('__un__', unicode)
            writeFile(
                resolve(outputPath, className/*.replace(/(d)$/, (match, num) => `${num}___`)*/ + '.svg'),
                svg,
                function (err) { if (err) { throw err } }
            );
            writeFile(
                resolve(outputPath, 'unicode-map.js'),
                'module.exports=' + JSON.stringify(unicodeMap),
                function (err) { if (err) { throw err } }
            )
        });
    } else {
        throw err
    }
});

这段代码当时从网上搜索来的，本身不带地址，现在找不到原文了，如果原作者看到了留言告知并提供地址我将附上原文。

下载svg文件
- 如果是直接引用iconfont css文件的，则在浏览器打开css的url可以看到下图中圈出的svg文件地址，直接打开并下载这个文件，注意这个地址是//开头的，所以需要加上https:：
- 如果是直接下载字体图标到本地使用的，则在下载包中已经包含了iconfont.svg文件
创建目录output，并执行js文件所在目录执行node svg.js,
注意：
- 将svg.js改成你自己保存的文件名称;
- 修改js文件中的iconfont地址
运行后将在脚本所在目录生成类似下图的文件：
打开iconfont 点这里上传文件:
将刚导出的svg文件拖进去：
文件拖入后将自动上传，注意下图圈出的部分：