Merge pull request #121 from primer/svg_sprite_example

Cleaning up the svg spritesheet and creating a demo
primer · Sep 10, 2016 · 3ae7d21 · 3ae7d21
2 parents 80f42e6 + 8af0a09
commit 3ae7d21
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 20 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -41,21 +41,53 @@ 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 octicons = require("./index.js")
+
+          var icons = function() {
+            var result = []
+            Object.keys(octicons).forEach(function(key){
+              result.push("<div style=\"width: 10%;min-width: 100px;flex: 0 0 auto;box-sizing:border-box;padding:1em;text-align:center;\">" + octicons[key].toSVGUse({ height: 32 }) + "<div>" + key + "</div></div>")
+            })
+            return result.join("\n")
           }
-        }
+
+          return `
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Octicons Spritesheet test</title>
+    <link rel="stylesheet" href="./octicons.css" media="screen" title="no title">
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        color: #222;
+        font-size: 15px;
       }
+    </style>
+  </head>
+  <body>
+    ${arg.svg}
+    <div style="font-size: 2.2em;padding-left: 20px;">Octicons SVG Spritesheet demo</div>
+    <div style="font-size: 1.2em;margin: 1em 0;padding-left: 20px;">All the icons rendered below use the svg spriteheet located in the <code>/build/</code> directory.</div>
+    <div style="flex: 0 1 auto;display:flex;flex-wrap: wrap;    flex-direction: row;">
+      ${icons()}
+    </div>
+  </body>
+</html>
+`
+        }
+      },
+      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
@@ -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.
@@ -123,8 +127,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": "" })
-// <svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+octicons.x.toSVG({ "width": 45 })
+// <svg version="1.1" width="45" height="60" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+```
+
+#### `octicons.alert.toSVGUse()`
+
+Returns a string of the svg tag with the `<use>` tag, for use with the spritesheet located in the /build/ directory.
+
+```js
+octicons.x.toSVGUse()
+// <svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><use xlink:href="#x" /></svg>
 ```
 
 ### Ruby

diff --git a/index.js b/index.js
@@ -56,6 +56,11 @@ Object.keys(data).forEach(function(key) {
   data[key].toSVG = function(options) {
     return "<svg " + htmlAttributes(data[key], options) + ">" + data[key].path + "</svg>"
   }
+
+  // Function to return an SVG object with a use, assuming you use the svg sprite
+  data[key].toSVGUse = function(options) {
+    return "<svg " + htmlAttributes(data[key], options) + "><use xlink:href=\"#" + key + "\" /></svg>"
+  }
 })
 
 // Import data into exports

diff --git a/package.json b/package.json
@@ -27,8 +27,8 @@
     "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-svgmin": "^3.2.0",
+    "grunt-svgstore": "^1.0.0"
   },
   "keywords": [
     "GitHub",