build: Add script to build dist/icons.json

This commit is contained in:
Cole Bemis 2017-07-03 14:44:19 -07:00 committed by Cole Bemis
parent c089ee1f89
commit ae164db70f
3 changed files with 84 additions and 0 deletions

5
.babelrc Normal file
View File

@ -0,0 +1,5 @@
{
"presets": [
"es2015"
]
}

8
Makefile Normal file
View File

@ -0,0 +1,8 @@
node_modules:
npm install
dist:
mkdir dist
dist/icons.json: node_modules dist icons icons/*.svg
./node_modules/.bin/babel-node bin/build-json.js

71
bin/build-json.js Executable file
View File

@ -0,0 +1,71 @@
/**
* @file Builds `icons.json` from `icons` directory.
*/
/* eslint-disable import/no-extraneous-dependencies */
import fs from 'fs';
import path from 'path';
import RSVP from 'rsvp';
import Svgo from 'svgo';
import parse5 from 'parse5';
const svgFiles = fs.readdirSync(path.resolve(__dirname, '../icons'))
.filter(file => path.extname(file) === '.svg');
buildIconsObject(svgFiles)
.then(icons => {
fs.writeFileSync(
path.resolve(__dirname, '../dist/icons.json'),
JSON.stringify(icons),
);
});
/**
* Build an icons object in the format: `{ <icon name>: <svg content> }`.
* @param {string[]} svgFiles - A list of file names.
* @returns {RSVP.Promise<Object>}
*/
function buildIconsObject(svgFiles) {
const icons = {};
svgFiles.forEach(svgFile => {
const svg = fs.readFileSync(path.resolve(__dirname, '../icons', svgFile), 'utf8');
const key = path.basename(svgFile, '.svg');
icons[key] = optimizeSvg(svg)
.then(optimizedSvg => getSvgContent(optimizedSvg));
});
return RSVP.hash(icons);
}
/**
* Optimize SVG with `svgo`.
* @param {string} svg - An SVG string.
* @returns {RSVP.Promise<string>}
*/
function optimizeSvg(svg) {
// configure svgo
const svgo = new Svgo({
plugins: [
{ convertShapeToPath: false },
{ mergePaths: false },
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
],
});
return new RSVP.Promise(resolve => {
svgo.optimize(svg, ({ data }) => resolve(data));
});
}
/**
* Get content between opening and closing `<svg>` tags.
* @param {string} svg - An SVG string.
* @returns {string}
*/
function getSvgContent(svg) {
const fragment = parse5.parseFragment(svg);
const content = parse5.serialize(fragment.childNodes[0]);
return content;
}