Merge pull request #29 from Brightspace/svg-support

adding support for SVG icons
BrightspaceUI · Jan 18, 2016 · 3bf5da6 · 3bf5da6
2 parents 59e1ea9 + 2abb16b
commit 3bf5da6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/create-css-scss.js b/create-css-scss.js
@@ -9,7 +9,7 @@ var writeCssScss = function(iconPaths, scssPath) {
 	var fs = require('fs');
 	var scss = fs.createWriteStream(scssPath);
 
-	scss.write('@import \'icons\';\n\n');
+	scss.write('@import \'icons.scss\';\n\n');
 
 	scss.write('[class*=" vui-icon-"],\n');
 	scss.write('[class^="vui-icon-"] { \n');

diff --git a/create-scss.js b/create-scss.js
@@ -24,10 +24,10 @@ var writeScss = function(iconInfos, scssPath) {
 
 		scss.write('@mixin vui-icon-' + iconInfo.mixin + '() {\n');
 		scss.write('	&:before {\n');
-		scss.write('		content: url("data:image/png;base64,' + iconInfo.ltrIcon.toString('base64') + '");\n');
+		scss.write('		content: url("data:' + iconInfo.mimeType + ';base64,' + iconInfo.ltrIcon.toString('base64') + '");\n');
 		if ( iconInfo.rtlIcon ) {
 			scss.write('		[dir=\'rtl\'] & {\n');
-			scss.write('			content: url("data:image/png;base64,' + iconInfo.rtlIcon.toString('base64') + '");\n');
+			scss.write('			content: url("data:' + iconInfo.mimeType + ';base64,' + iconInfo.rtlIcon.toString('base64') + '");\n');
 			scss.write('		}\n');
 		}
 		scss.write('	}\n');

diff --git a/for-each-icon.js b/for-each-icon.js
@@ -5,14 +5,24 @@ var forEachIcon = function( iconPaths, delegate ) {
 	var through2 = require( 'through2' ),
 		deferred = require( 'q' ).defer(),
 		vfs = require( 'vinyl-fs' ),
-		iconsData = require( './icons.json' );
+		iconsData = require( './icons.json' ),
+		path = require('path');
 
 	vfs.src( iconPaths, { base: './' } ).pipe(
 		through2.obj( function( file, enc, done ) {
 
 			var fileName = file.path.replace( /^.*[\\\/]/, '' );
 			var iconData = iconsData[ fileName ];
 
+			var mimeType;
+			switch(path.extname(fileName).toLowerCase()) {
+				case '.svg':
+					mimeType = 'image/svg';
+					break;
+				case '.png':
+					mimeType = 'image/png';
+			}
+
 			fileName = fileName.substr( 0, fileName.lastIndexOf( '.' ) );
 
 			var isRtl = ( fileName.length > 4 && fileName.substr( fileName.length - 4, 4 ) == '_rtl' );
@@ -32,7 +42,8 @@ var forEachIcon = function( iconPaths, delegate ) {
 				file: file,
 				isRtl: isRtl,
 				mixin: iconData ? iconData.mixin : undefined,
-				path: file.relative
+				path: file.relative,
+				mimeType: mimeType
 			} );
 
 			done();

diff --git a/icons.css.scss b/icons.css.scss
@@ -1,4 +1,4 @@
-@import 'icons';
+@import 'icons.scss';
 
 [class*=" vui-icon-"],
 [class^="vui-icon-"] { 

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "vui-icons",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Mixins, CSS and image assets for consuming icons",
   "scripts": {
     "prebuild": "rimraf *.css",
     "build": "npm run build:css",
-    "build:sass": "node ./cli/create-scss-cli -o icons.scss images/**/*.png",
-    "build:vui": "node ./cli/create-css-scss-cli -o icons.css.scss images/**/*.png",
+    "build:sass": "node ./cli/create-scss-cli -o icons.scss images/**/*.*",
+    "build:vui": "node ./cli/create-css-scss-cli -o icons.css.scss images/**/*.*",
     "prebuild:css": "npm run build:sass && npm run build:vui",
     "build:css": "node-sass --output-style expanded icons.css.scss icons.css",
     "pretest": "npm run build",
@@ -28,21 +28,21 @@
   },
   "homepage": "https://github.com/Brightspace/valence-ui-icons",
   "devDependencies": {
-    "chalk": "^0.5.1",
+    "chalk": "^1.1.1",
     "csslint": "^0.10.0",
     "fs": "0.0.2",
     "jasmine-dom-matchers": "^0.1.0",
-    "imagemin": "^3.1.0",
-    "images-to-variables": "^0.2.2",
-    "karma": "^0.12.32",
-    "karma-phantomjs-launcher": "^0.1.4",
-    "karma-jasmine": "^0.3.5",
-    "karma-cli": "0.0.4",
-    "node-sass": "^3.1.1",
-    "q": "^1.0.1",
+    "imagemin": "^4.0.0",
+    "images-to-variables": "^0.3.0",
+    "karma": "^0.13.19",
+    "karma-phantomjs-launcher": "^0.2.3",
+    "karma-jasmine": "^0.3.6",
+    "karma-cli": "0.1.2",
+    "node-sass": "^3.4.2",
+    "q": "^1.4.1",
     "rimraf": "^2.3.4",
-    "through2": "^0.6.2",
-    "vinyl-fs": "^0.3.7",
-    "yargs": "^3.10.0"
+    "through2": "^2.0.0",
+    "vinyl-fs": "^2.3.1",
+    "yargs": "^3.32.0"
   }
 }