Visitar URL original
build: Add process-svgs script (#216) · vameri/feather@0dc2bf5 · GitHub
Skip to content

Commit 0dc2bf5

Browse files
author
Cole Bemis
authored
build: Add process-svgs script (feathericons#216)
1 parent f2b7e1f commit 0dc2bf5

249 files changed

Lines changed: 5213 additions & 905 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Makefile‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
src_files := src/*.js
22
src_dir := src
33

4-
.PHONY: all lint build
4+
.PHONY: all lint test build
55

6-
all: lint build
6+
all: lint test build
77

88
lint: dist/icons.json
99
./node_modules/.bin/eslint .
1010

11+
test:
12+
./node_modules/.bin/jest
13+
1114
build: dist/feather.js dist/feather.min.js dist/icons
1215

1316
node_modules:
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`processes SVG correctly 1`] = `
4+
"<svg
5+
xmlns=\\"http://www.w3.org/2000/svg\\"
6+
width=\\"24\\"
7+
height=\\"24\\"
8+
viewBox=\\"0 0 24 24\\"
9+
fill=\\"none\\"
10+
stroke=\\"currentColor\\"
11+
stroke-width=\\"2\\"
12+
stroke-linecap=\\"round\\"
13+
stroke-linejoin=\\"round\\"
14+
>
15+
<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" />
16+
<line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />
17+
</svg>
18+
"
19+
`;
20+
21+
exports[`rejects when passed unparsable SVG string 1`] = `
22+
[Error: Error in parsing SVG: Unclosed root tag
23+
Line: 0
24+
Column: 10
25+
Char: ]
26+
`;

‎bin/__tests__/process-svg.test.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-env jest */
2+
import processSvg from '../process-svg';
3+
4+
test('processes SVG correctly', () => {
5+
const SVG =
6+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Title</title><line x1="23" y1="1" x2="1" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="1" y1="1" x2="23" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>';
7+
8+
expect(processSvg(SVG)).resolves.toMatchSnapshot();
9+
});
10+
11+
test('rejects when passed unparsable SVG string', () => {
12+
const UNPARSABLE_SVG = '<svg></svg';
13+
14+
expect(processSvg(UNPARSABLE_SVG)).rejects.toMatchSnapshot();
15+
});

‎bin/process-svg.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import Svgo from 'svgo';
3+
import cheerio from 'cheerio';
4+
import { format } from 'prettier';
5+
6+
import DEFAULT_ATTRIBUTES from '../src/default-attributes.json';
7+
8+
/**
9+
* Process SVG string.
10+
* @param {string} svg - An SVG string.
11+
* @param {Promise<string>}
12+
*/
13+
function processSvg(svg) {
14+
return (
15+
optimize(svg)
16+
.then(setAttributes)
17+
.then(format)
18+
// remove semicolon inserted by prettier
19+
// because prettier thinks it's formatting JSX not HTML
20+
.then(svg => svg.replace(/;/g, ''))
21+
);
22+
}
23+
24+
/**
25+
* Optimize SVG with `svgo`.
26+
* @param {string} svg - An SVG string.
27+
* @returns {Promise<string>}
28+
*/
29+
function optimize(svg) {
30+
const svgo = new Svgo({
31+
plugins: [
32+
{ convertShapeToPath: false },
33+
{ mergePaths: false },
34+
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
35+
{ removeTitle: true },
36+
],
37+
});
38+
39+
return new Promise(resolve => {
40+
svgo.optimize(svg, ({ data }) => resolve(data));
41+
});
42+
}
43+
44+
/**
45+
* Set default attibutes on SVG.
46+
* @param {string} svg - An SVG string.
47+
* @returns {string}
48+
*/
49+
function setAttributes(svg) {
50+
const $ = cheerio.load(svg);
51+
52+
Object.keys(DEFAULT_ATTRIBUTES).forEach(key =>
53+
$('svg').attr(key, DEFAULT_ATTRIBUTES[key]),
54+
);
55+
56+
return $('body').html();
57+
}
58+
59+
export default processSvg;

‎bin/process-svgs.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import fs from 'fs';
3+
import path from 'path';
4+
5+
import processSvg from './process-svg';
6+
7+
const ICONS_DIR = path.resolve(__dirname, '../icons');
8+
9+
fs
10+
.readdirSync(ICONS_DIR)
11+
.filter(file => path.extname(file) === '.svg')
12+
.forEach(svgFile => {
13+
const svg = fs.readFileSync(path.join(ICONS_DIR, svgFile));
14+
processSvg(svg).then(svg => fs.writeFileSync(path.join(ICONS_DIR, svgFile), svg));
15+
});

‎icons/activity.svg‎

Lines changed: 12 additions & 2 deletions
Loading

‎icons/airplay.svg‎

Lines changed: 13 additions & 3 deletions
Loading

‎icons/alert-circle.svg‎

Lines changed: 14 additions & 4 deletions
Loading

‎icons/alert-octagon.svg‎

Lines changed: 14 additions & 4 deletions
Loading

‎icons/alert-triangle.svg‎

Lines changed: 14 additions & 4 deletions
Loading

0 commit comments

Comments
 (0)