diff --git a/Gruntfile.js b/Gruntfile.js
index f3b510b66..1619f8043 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -83,18 +83,23 @@ module.exports = function(grunt) {
grunt.registerTask('svg', ['clean', 'svgmin', 'svg_sprite']);
// default task, build /dist/
- grunt.registerTask('default', [ 'svg', 'css', 'svg_json']);
+ grunt.registerTask('default', [ 'svg', 'css', 'json:svg']);
- grunt.registerTask('svg_json', 'create a json object with all minimized svg', function() {
- var result = {}
+ grunt.registerTask('json:svg', 'add svg string to data.json build', function() {
var files = fs.readdirSync("./build/svg/")
+ var data = JSON.parse(fs.readFileSync("./lib/data.json"))
files.forEach(function(file) {
var svg = fs.readFileSync(path.resolve("./build/svg", file))
var key = path.basename(file, ".svg")
- result[key] = svg.toString()
+ if (data[key]) {
+ var raw = svg.toString()
+ data[key].path = //g.exec(raw)[0]
+ data[key].height = /height="(\d+)"/g.exec(raw)[1]
+ data[key].width = /width="(\d+)"/g.exec(raw)[1]
+ }
})
- fs.writeFileSync("build/svg.json", JSON.stringify(result));
+ fs.writeFileSync("build/data.json", JSON.stringify(data));
})
};
diff --git a/README.md b/README.md
index 961859f72..3a47d8996 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
## Install
+**NOTE:** The compiled files are located in `/build/`. This directory is located in the published npm package. Which means you can access it when you `npm install octicons`. You can also build this directory by following the [building octicons directions](#building-octicons). The files in the `/lib/` directory are the raw source files and are not compiled or optimized.
#### NPM
@@ -18,12 +19,122 @@ $ npm install --save octicons
## Usage
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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.
+
+### Node
+
+After installing `npm install octicons` you can access the icons like this.
+
+```js
+var octicons = require("octicons")
+octicons.alert
+// { keywords: [ 'warning', 'triangle', 'exclamation', 'point' ],
+// path: '',
+// height: '16',
+// width: '16',
+// symbol: 'alert',
+// options:
+// { version: '1.1',
+// width: '16',
+// height: '16',
+// viewBox: '0 0 16 16',
+// class: 'octicon octicon-alert',
+// 'aria-hidden': 'true' },
+// toSVG: [Function] }
+```
+
+There will be a key for every icon, with `keywords` and `svg`.
+
+#### `octicons.alert.symbol`
-```scss
-@import "octicons/index.scss";
+Returns the string of the symbol name
+
+```js
+octicons.x.symbol
+// "x"
```
+#### `octicons.person.path`
+
+Path returns the string representation of the path of the icon.
+
+```js
+octicons.x.path
+//
+```
+
+#### `octicons.issue.options`
+
+This is a json object of all the `options` that will be added to the output tag.
+
+```js
+octicons.x.options
+// { version: '1.1', width: '12', height: '16', viewBox: '0 0 12 16', class: 'octicon octicon-x', 'aria-hidden': 'true' }
+```
+
+#### `octicons.alert.width`
+
+Width is the icon's true width. Based on the svg view box width. _Note, this doesn't change if you scale it up with size options, it only is the natural width of the icon_
+
+#### `octicons.alert.height`
+
+Height is the icon's true height. Based on the svg view box height. _Note, this doesn't change if you scale it up with size options, it only is the natural height of the icon_
+
+#### `keywords`
+
+Returns an array of keywords for the icon. The data [comes from the octicons repository](https://github.com/primer/octicons/blob/master/lib/data.json). Consider contributing more aliases for the icons.
+
+```js
+octicons.x.keywords
+// ["remove", "close", "delete"]
+```
+
+#### `octicons.alert.toSVG()`
+
+Returns a string of the svg tag
+
+```js
+octicons.x.toSVG()
+//
+```
+
+The `.toSVG()` method accepts an optional `options` object. This is used to add CSS classnames, a11y options, and sizing.
+
+##### class
+
+Add more CSS classes to the `