Skip to content

Commit

Permalink
make icon its own module (#95)
Browse files Browse the repository at this point in the history
abstract the method to make icon markup into its own module.

this allows for it to be used in JavaScript environment that does not
have access to nodeism like `fs` or `__dirname` (such as browserify or
webpack).

this method could potentially be re-used in the browser asset
bundle, as it is the same.
  • Loading branch information
tnguyen14 authored and madyankin committed Jun 6, 2018
1 parent 56de763 commit 7fb39b3
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 25 deletions.
26 changes: 1 addition & 25 deletions evil-icons.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,7 @@
var fs = require('fs');
var spritePath = __dirname + '/assets/sprite.svg';
var sprite = fs.readFileSync(spritePath).toString();

function icon(name, options) {
var options = options || {};
var size = options.size ? ' icon--' + options.size : '';
var classes = 'icon icon--' + name + size + ' ' + (options.class || '');
classes = classes.trim();

var icon = '<svg class="icon__cnt">' +
'<use xlink:href="#' + name + '-icon" />' +
'</svg>';

var html = '<div class="' + classes + '">' +
wrapSpinner(icon, classes) +
'</div>';

return html;
}

function wrapSpinner(html, klass) {
if (klass.indexOf('spinner') > -1) {
return '<div class="icon__spinner">' + html + '</div>';
} else {
return html;
}
}
var icon = require('./icon');;

function buildParamsFromString(string) {
var match, attr, value;
Expand Down
26 changes: 26 additions & 0 deletions icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = icon;

function icon(name, options) {
var options = options || {};
var size = options.size ? ' icon--' + options.size : '';
var classes = 'icon icon--' + name + size + ' ' + (options.class || '');
classes = classes.trim();

var icon = '<svg class="icon__cnt">' +
'<use xlink:href="#' + name + '-icon" />' +
'</svg>';

var html = '<div class="' + classes + '">' +
wrapSpinner(icon, classes) +
'</div>';

return html;
}

function wrapSpinner(html, klass) {
if (klass.indexOf('spinner') > -1) {
return '<div class="icon__spinner">' + html + '</div>';
} else {
return html;
}
}

0 comments on commit 7fb39b3

Please sign in to comment.