From 7114eca8063e33e3d68d4fb3d7ef4b4454bf0831 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Sat, 10 Sep 2016 14:29:54 -0400 Subject: [PATCH 1/4] Cleaning up the svg spritesheet and creating a demo --- Gruntfile.js | 64 +++++++++++++++++++++++++++++++++++++++------------- README.md | 13 +++++++++-- index.js | 5 ++++ package.json | 3 ++- 4 files changed, 66 insertions(+), 19 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 1619f8043..d814e1273 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,6 @@ var fs = require("fs") var path = require("path") +var octicons = require("./index.js") module.exports = function(grunt) { @@ -41,21 +42,52 @@ module.exports = function(grunt) { } }, - svg_sprite: { - octicons: { - expand: true, - cwd: 'lib/svg', - src: ['*.svg'], - dest: 'build/', - options: { - mode: { - symbol: { - dest: "", - sprite: "sprite.octicons.svg" - } + svgstore: { + options: { + includeTitleElement: false, + inheritviewbox: true, + includedemo: function(arg) { + + var icons = function() { + var result = [] + Object.keys(octicons).forEach(function(key){ + result.push("
" + octicons[key].toSVGUse({ height: 32 }) + "
" + key + "
") + }) + return result.join("\n") } - } + + return ` + + + + + Octicons Spritesheet test + + + + + ${arg.svg} +
Octicons SVG Spritesheet demo
+
All the icons rendered below use the svg spriteheet located in the /build/ directory.
+
+ ${icons()} +
+ + +` + } + }, + default: { + files: { + "build/sprite.octicons.svg": ['build/svg/*.svg'] + } + }, }, clean: { @@ -74,16 +106,16 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-svg-sprite'); + grunt.loadNpmTasks('grunt-svgstore'); grunt.loadNpmTasks('grunt-svgmin'); grunt.loadNpmTasks('grunt-cssnano'); // build tasks grunt.registerTask('css', ['copy', 'cssnano']); - grunt.registerTask('svg', ['clean', 'svgmin', 'svg_sprite']); + grunt.registerTask('svg', ['clean', 'svgmin']); // default task, build /dist/ - grunt.registerTask('default', [ 'svg', 'css', 'json:svg']); + grunt.registerTask('default', [ 'svg', 'css', 'json:svg', 'svgstore']); grunt.registerTask('json:svg', 'add svg string to data.json build', function() { var files = fs.readdirSync("./build/svg/") diff --git a/README.md b/README.md index 3a47d8996..c7bc6ab29 100644 --- a/README.md +++ b/README.md @@ -123,8 +123,17 @@ octicons.x.toSVG({ "aria-label": "Close the window" }) Size the SVG icon larger using `width` & `height` independently or together. ```js -octicons.x.toSVG({ "width": "" }) -// +octicons.x.toSVG({ "width": 45 }) +// +``` + +#### `octicons.alert.toSVGUse()` + +Returns a string of the svg tag with the `` tag, for use with the spritesheet located in the /build/ directory. + +```js +octicons.x.toSVGUse() +// ``` ### Ruby diff --git a/index.js b/index.js index 0f6e677bc..186af5cb4 100644 --- a/index.js +++ b/index.js @@ -56,6 +56,11 @@ Object.keys(data).forEach(function(key) { data[key].toSVG = function(options) { return "" + data[key].path + "" } + + // Function to return an SVG object with a use, assuming you use the svg sprite + data[key].toSVGUse = function(options) { + return "" + } }) // Import data into exports diff --git a/package.json b/package.json index a9e6ddfa6..135d04f76 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "grunt-contrib-copy": "^1.0.0", "grunt-cssnano": "^2.1.0", "grunt-svg-sprite": "^1.2.19", - "grunt-svgmin": "^3.2.0" + "grunt-svgmin": "^3.2.0", + "grunt-svgstore": "^1.0.0" }, "keywords": [ "GitHub", From 6b208feb8d505f6bf1f040de7a9e950d5d459285 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Sat, 10 Sep 2016 14:34:47 -0400 Subject: [PATCH 2/4] some instructions on the spritesheet --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c7bc6ab29..84edd84dc 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,10 @@ $ npm install --save octicons For all the usages, we recommend using the CSS located in `./build/octicons.css`. This is some simple CSS to normalize the icons and inherit colors. +### Spritesheet + +With a [SVG sprite icon system](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) you can include the sprite sheet located `./build/sprite.octicons.svg` after you [build the icons](#building-octicons) or from the npm package. There is a demo of how to use the spritesheet in the build directory also. + ### Node After installing `npm install octicons` you can access the icons like this. From 9c4e1d86dffadd79f478a823a133b09836da60fc Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Sat, 10 Sep 2016 14:41:18 -0400 Subject: [PATCH 3/4] Moving inside so requirements are met --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index d814e1273..0b08b6bc7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,6 +1,5 @@ var fs = require("fs") var path = require("path") -var octicons = require("./index.js") module.exports = function(grunt) { @@ -47,6 +46,7 @@ module.exports = function(grunt) { includeTitleElement: false, inheritviewbox: true, includedemo: function(arg) { + var octicons = require("./index.js") var icons = function() { var result = [] From 8af0a0981fd3c37cb6d4df2358f731d869e23412 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Sat, 10 Sep 2016 16:37:54 -0400 Subject: [PATCH 4/4] not needed anymore --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 135d04f76..698d829ac 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "grunt-contrib-clean": "^1.0.0", "grunt-contrib-copy": "^1.0.0", "grunt-cssnano": "^2.1.0", - "grunt-svg-sprite": "^1.2.19", "grunt-svgmin": "^3.2.0", "grunt-svgstore": "^1.0.0" },