Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cleaning up the svg spritesheet and creating a demo #121

Merged
merged 4 commits into from
Sep 10, 2016
Merged

Cleaning up the svg spritesheet and creating a demo #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7114eca
Cleaning up the svg spritesheet and creating a demo
jonrohan Sep 10, 2016
6b208fe
some instructions on the spritesheet
jonrohan Sep 10, 2016
9c4e1d8
Moving inside so requirements are met
jonrohan Sep 10, 2016
8af0a09
not needed anymore
jonrohan Sep 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 48 additions & 16 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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/")
Expand Down
17 changes: 15 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down