feat: Add SVG sprite support (#319) · maxiecloud/feather@3422f0a · GitHub
Skip to content

Commit 3422f0a

Browse files
ivanquirinocolebemis
ivanquirino
authored and
colebemis
committed
feat: Add SVG sprite support (feathericons#319)
1 parent b3655c4 commit 3422f0a

6 files changed

Lines changed: 108 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 37 additions & 0 deletions

‎bin/__tests__/__snapshots__/build-sprite-string.test.js.snap‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`builds sprite correctly 1`] = `
4+
"<svg xmlns=\\"http://www.w3.org/2000/svg\\">
5+
<defs>
6+
<symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\">
7+
<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>
8+
</symbol>
9+
<symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\">
10+
<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>
11+
</symbol>
12+
</defs>
13+
</svg>"
14+
`;

‎bin/__tests__/build-sprite-string.test.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* eslint-env jest */
2+
import buildSpriteString from '../build-sprite-string';
3+
4+
const icons = {
5+
icon1:
6+
'<line x1="23" y1="1" x2="1" y2="23"></line><line x1="1" y1="1" x2="23" y2="23"></line>',
7+
icon2: '<circle cx="12" cy="12" r="11"></circle>',
8+
};
9+
10+
test('builds sprite correctly', () => {
11+
expect(buildSpriteString(icons)).toMatchSnapshot();
12+
});

‎bin/build-sprite-string.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import defaultAttrs from '../src/default-attrs.json';
2+
3+
const svgStartTag = `<svg xmlns="${defaultAttrs.xmlns}">\n<defs>\n`;
4+
const svgEndTag = '</defs>\n</svg>';
5+
6+
/**
7+
* Renders the inner sprites as SVG Symbols
8+
* @param {object} icons the icons object
9+
* @returns {string} the rendered string with SVG symbols
10+
*/
11+
function buildSpriteString(icons) {
12+
const symbols = Object.keys(icons)
13+
.map(icon => toSvgSymbol(icon, icons[icon]))
14+
.join('');
15+
16+
return svgStartTag + symbols + svgEndTag;
17+
}
18+
19+
/**
20+
* Renders a SVG symbol tag
21+
* @param {string} name The name of the icon
22+
* @param {string} contents The contents of the icon
23+
* @returns {string} the rendered SVG symbol
24+
*/
25+
function toSvgSymbol(name, contents) {
26+
return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}">
27+
${contents}\n</symbol>\n`;
28+
}
29+
30+
export default buildSpriteString;

‎bin/build-sprite.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
import icons from '../dist/icons.json';
4+
import buildSpriteString from './build-sprite-string';
5+
6+
const sprite = buildSpriteString(icons);
7+
8+
const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
9+
10+
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
11+
12+
fs.writeFile(OUT_FILE, sprite, err => {
13+
if (err) throw err;
14+
});

‎bin/build.sh‎

Lines changed: 1 addition & 0 deletions

0 commit comments

Comments
 (0)