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..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.
@@ -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": "" })
-//
+octicons.x.toSVG({ "width": 45 })
+//
+```
+
+#### `octicons.alert.toSVGUse()`
+
+Returns a string of the svg tag with the `