Node.js: salvare le Material Icons di Google in un unico file JSON

In questo articolo vedremo come raccogliere le Material Icons di Google in un unico file JSON con Node.js.

Dopo aver clonato in locale la repository delle Material Icons, installiamo il modulo NPM cheerio che utilizzeremo per il parsing dei file SVG delle icone.

npm install cheerio

A questo punto definiamo le costanti base del nostro script:

'use strict';

const fs = require('fs');
const cheerio = require('cheerio');
const CURRENT_VERSIONS_FILE_PATH = './update/current_versions.json';
const SRC_PATH = './src/';
const SVG_FILE_NAME = '24px.svg';
const JSON_OUTPUT_FILE = './material.json';

Il file current_versions.json contiene l'elenco delle icone presenti usando il seguente formato:

{
  "directory_categoria::directory_nome_icona": numero,
}

Definiamo quindi due funzioni di utility per il parsing di questo file:

const getVersionsFile = () => {
    return JSON.parse(fs.readFileSync(CURRENT_VERSIONS_FILE_PATH).toString());
};

const parseVersionsFile = data => {
    if(typeof data !== 'object' || data === null) {
        return [];
    }
    const struct = [];
    for(let prop in data) {
        let [folder, icon] = prop.split('::');
        struct.push({ folder, icon });
    }
    return struct;
};

Ora possiamo creare una funzione che estragga i dati rilevanti dal file SVG di ciascuna icona e li converta in un oggetto letterale JavaScript.

const getIconData = icon => {
    if(typeof icon !== 'object' || icon === null) {
        return null;
    }
    let iconPath = SRC_PATH + icon.folder + '/' + icon.icon + '/materialicons/' + SVG_FILE_NAME;
    if(!fs.existsSync(iconPath)) {
        return null;
    }

    let iconData = fs.readFileSync(iconPath).toString();
    let $ = cheerio.load(iconData);
    let $path = $('path');
    let paths = [];
    $path.each(function() {
        let $p = $(this);
        paths.push({
           d: $p.attr('d'),
           fill: $p.attr('fill')
        });
    });

    return {
        icon: icon.icon,
        path: paths
    };
};

Da ciascun documento SVG dobbiamo estrarre i dati relativi all'elemento path utilizzando il modulo cheerio. Infine, creiamo la funzione di inizializzazione del nostro codice che genererà il file JSON finale.

const init = () => {
    const data = parseVersionsFile(getVersionsFile());
    const json = [];
    data.forEach(datum => {
       json.push(getIconData(datum));
    });
    const jsonStr = JSON.stringify(json, null, 2);
    if(fs.existsSync(JSON_OUTPUT_FILE)) {
        fs.unlinkSync(JSON_OUTPUT_FILE);
    }
    fs.writeFileSync(JSON_OUTPUT_FILE, jsonStr);
};

init();