Last active
August 29, 2015 14:17
-
-
Save exdeniz/9af12ac815df02a63c16 to your computer and use it in GitHub Desktop.
Modify svg caching script from http://osvaldas.info/caching-svg-sprite-in-localstorage.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;( function( window, document ) | |
| { | |
| 'use strict'; | |
| var file = './img/svghtml.html', | |
| revision = 1, | |
| debug = true; | |
| if( !document.createElementNS || !document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect ) | |
| return true; | |
| var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null, | |
| request, | |
| data, | |
| insertIT = function() | |
| { | |
| document.body.insertAdjacentHTML( 'afterbegin', data ); | |
| }, | |
| insert = function() | |
| { | |
| if( document.body ) insertIT(); | |
| else document.addEventListener( 'DOMContentLoaded', insertIT ); | |
| }; | |
| if( isLocalStorage && localStorage.getItem( 'inlineSVGrev' ) == revision & debug == false ) | |
| { | |
| data = localStorage.getItem( 'inlineSVGdata' ); | |
| if( data ) | |
| { | |
| insert(); | |
| return true; | |
| } | |
| } | |
| try | |
| { | |
| request = new XMLHttpRequest(); | |
| request.open( 'GET', file, true ); | |
| request.onload = function() | |
| { | |
| if( request.status >= 200 && request.status < 400 ) | |
| { | |
| data = request.responseText; | |
| insert(); | |
| if( isLocalStorage ) | |
| { | |
| localStorage.setItem( 'inlineSVGdata', data ); | |
| localStorage.setItem( 'inlineSVGrev', revision ); | |
| } | |
| } | |
| } | |
| request.send(); | |
| } | |
| catch( e ){} | |
| }( window, document ) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><% _.forEach( icons, function( icon ){ %> | |
| <symbol id="<%= icon.id %>" viewBox="<%= icon.svg.viewBox %>"><% if (icon.title) {%> | |
| <title><%= icon.title %></title><% }%> | |
| <%= icon.svg.content %> | |
| </symbol><% | |
| }); %></svg> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| mixin svgIcon(name) | |
| - idname = "#" + name | |
| svg | |
| use(xlink:href=idname) | |
| // Use +svgIcon('icon-jade') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var gulp = require('gulp'), | |
| svgSymbols = require('gulp-svg-symbols'), | |
| browserSync = require('browser-sync'), | |
| cheerio = require('gulp-cheerio'), | |
| path = require('path'), | |
| reload = browserSync.reload, | |
| customHTMLTemplate = path.join(__dirname, './config/template/svghtml.html'); | |
| gulp.task('svgicon', function() { | |
| gulp.src('./assets/svg/**/*.svg') | |
| .pipe(cheerio({ | |
| run: function($) { | |
| $('[fill]').removeAttr('fill'); | |
| }, | |
| parserOptions: { | |
| xmlMode: true | |
| } | |
| })) | |
| .pipe(svgSymbols({ | |
| templates: ['./config/template/svghtml.html'] | |
| })) | |
| .pipe(gulp.dest('./public/img/')) | |
| .pipe(reload({ | |
| stream: true | |
| })); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add debug = true for develop, change to false fro production.
Remeber script request file via XMLHttpRequest() and it not work for file://.
Use direct include svghtml.html
other script
gulp task and template for gulp-svg-symbol
mixin for jade