refactor: Refactor build-sprite-string.js

This commit is contained in:
Cole Bemis 2018-04-01 16:25:21 -07:00
parent 920bd45776
commit e697b3a927
3 changed files with 13 additions and 30 deletions

View File

@ -1,14 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`builds sprite correctly 1`] = ` exports[`builds sprite correctly 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\"><defs><symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></symbol><symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></symbol></defs></svg>"`;
"<svg xmlns=\\"http://www.w3.org/2000/svg\\">
<defs>
<symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\">
<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>
</symbol>
<symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\">
<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>
</symbol>
</defs>
</svg>"
`;

View File

@ -1,30 +1,28 @@
import defaultAttrs from '../src/default-attrs.json'; import defaultAttrs from '../src/default-attrs.json';
const svgStartTag = `<svg xmlns="${defaultAttrs.xmlns}">\n<defs>\n`;
const svgEndTag = '</defs>\n</svg>';
/** /**
* Renders the inner sprites as SVG Symbols * Build an SVG sprite string containing SVG symbols.
* @param {object} icons the icons object * @param {Object} icons
* @returns {string} the rendered string with SVG symbols * @returns {string}
*/ */
function buildSpriteString(icons) { function buildSpriteString(icons) {
const symbols = Object.keys(icons) const symbols = Object.keys(icons)
.map(icon => toSvgSymbol(icon, icons[icon])) .map(icon => toSvgSymbol(icon, icons[icon]))
.join(''); .join('');
return svgStartTag + symbols + svgEndTag; return `<svg xmlns="${defaultAttrs.xmlns}"><defs>${symbols}</defs></svg>`;
} }
/** /**
* Renders a SVG symbol tag * Create an SVG symbol string.
* @param {string} name The name of the icon * @param {string} name - Icon name
* @param {string} contents The contents of the icon * @param {string} contents - SVG contents
* @returns {string} the rendered SVG symbol * @returns {string}
*/ */
function toSvgSymbol(name, contents) { function toSvgSymbol(name, contents) {
return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}"> return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}">${
${contents}\n</symbol>\n`; contents
}</symbol>`;
} }
export default buildSpriteString; export default buildSpriteString;

View File

@ -3,12 +3,8 @@ import path from 'path';
import icons from '../dist/icons.json'; import icons from '../dist/icons.json';
import buildSpriteString from './build-sprite-string'; import buildSpriteString from './build-sprite-string';
const sprite = buildSpriteString(icons);
const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg'); const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
fs.writeFile(OUT_FILE, sprite, err => { fs.writeFileSync(OUT_FILE, buildSpriteString(icons));
if (err) throw err;
});