使用 node.js 從 iconfont.svg 文件中恢復單圖標文件

阿里巴巴矢量圖標庫 （如下稱 iconfont）提供了方便的圖標分享和管理功能。可是因爲其圖標項目獨立於代碼倉庫，每每致使 同一項目更換開發人員以後，接任者不能繼續管理原來的圖標庫，給開發帶來各類不便。

因爲 iconfont 生成的 svg 文件含有圖標路徑以及圖標名數據，所以 (對於保留了此 svg 文件的項目)能夠今後 svg 文件中提取出全部圖標，而後上傳至圖標庫，從新構建圖標項目。

1. svg 文件模板

SVG 的相關知識能夠在 SVG | MDN (mozilla.org) 學習。
爲了生成完整的 svg 文件，爲其準備了一個文件模板字符串：

// 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 d="__PATH__" />
</svg>`;

其中的 d 參數爲 svg 路徑，這裏用 __PATH__佔位，以便後面做字符串替換。

2. 切割 .svg 文件

iconfont 生成的 .svg 文件包含了全部圖標的路徑，用 /<glyph[^n]*/>/g 能夠匹配到每個圖標，並藉此將它們分離並存儲在一個數組裏：

readFile(resolve(__dirname, svgPath), 'utf8', (err, res) =>{
    const iconArray = res.match(/<glyph[^n]*/>/g);
}

3. 替換模板文件裏的路徑

使用正則從分離後的各圖標裏匹配出其對應的 name、unicode 和路徑信息：

iconArray.forEach(item => {
    // 分離 unicode
    const unicode = item.match(/unicode="&#(d+);"/)[1];
    // 分離類名即圖標名
    const className = item.match(/glyph-name="([w-_]+)"/)[1];
    // 分離路徑
    const path = item.match(/ d="([^"]*)"/)[1]);
});

4. 寫入文件

將 svg 模板字符串中的 __PATH__ 替換成匹配到的路徑:

fs.writeFile(
    path.resolve(outputPath, className + '.svg'),
    svgTemplate.replace('__PATH__', path),
    function(err){if(err){throw err}}
);

---

本文只簡述實現原理，不包含完整代碼，完整代碼已經上傳到 一個 GitHub 倉庫中，能夠按照其 readme 文件使用，此處再也不贅述。