Skip to content

Instantly share code, notes, and snippets.

@mfd mfd/_svg-sprite.scss
Last active Nov 6, 2017

Embed
What would you like to do?
gulp tasks => svg icons sprite
.icon {
fill: currentColor;
}
<% _.each(icons, function(icon) { %>.<%= icon.name %> {
width: <%= icon.ratio %>em;
height: 1em;
}
<% }); %>
var gulp = require('gulp');
var notify = require('gulp-notify');
var iconfont = require("gulp-iconfont");
var consolidate = require("gulp-consolidate");
var config = require('../config');
var browserSync = require('browser-sync');
reload = browserSync.reload;
var fontname = 'svgfont';
gulp.task('font', function(){
return gulp.src(config.src.img+'svg/*.svg')
// .pipe(svgmin())
.pipe(iconfont({
fontName: fontname,
PrependUnicode: true,
formats: ['ttf', 'eot', 'woff', 'woff2'],
normalize: true,
fontHeight: 1001,
fontStyle: 'normal',
fontWeight: 'normal'
}))
.on('glyphs', function(glyphs, options) {
console.log(glyphs);
gulp.src(config.src.helpers+'_svgfont.sass')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: fontname,
fontPath: 'fonts/',
className: 'icon'
}))
.pipe(gulp.dest(config.src.sass+'lib/'));
gulp.src(config.src.helpers+'icons.html')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: fontname,
fontPath: 'fonts/',
className: 'icon',
htmlBefore: '<i class="icon ',
htmlAfter: '"></i>',
htmlBr: ''
}))
.pipe(gulp.dest(config.dest.root));
})
.pipe(gulp.dest(config.dest.css+'fonts/'))
.pipe(reload({stream: true}))
.pipe(notify("Icon font updated!"));
});
gulp.task('font:watch', function() {
gulp.watch(config.src.img+'svg/*', ['font']);
});
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
svgmin = require('gulp-svgmin'),
svgStore = require('gulp-svgstore'),
rename = require('gulp-rename'),
cheerio = require('gulp-cheerio'),
consolidate = require('gulp-consolidate');
// sprite
gulp.task('sprites', function() {
return gulp
.src('src/icons/*.svg')
.pipe(svgmin({
js2svg: {
pretty: true
},
plugins: [{
removeDesc: true
}, {
cleanupIDs: true
}, {
mergePaths: false
}]
}))
.pipe(rename({ prefix: 'icon-' }))
.pipe(svgStore({ inlineSvg: false }))
.pipe(cheerio({
run: extractDataFromIcons,
parserOptions: { xmlMode: true }
}))
.pipe(rename({ basename: 'sprite' }))
.pipe(gulp.dest('app/img'));
});
function extractDataFromIcons($, file) {
// get data about each icon
var symbols = $('svg > symbol');
var data = $('svg > symbol').map(function() {
var $this = $(this);
var size = $this.attr('viewBox').split(' ').splice(2);
return {
name: $this.attr('id'),
ratio: Math.ceil((size[0] / size[1]) * 10) / 10
};
}).get();
// remove attributes to make possible applying these styles via css
symbols.each(function() {
$(this)
.children()
.removeAttr('stroke')
.removeAttr('stroke-width')
.not('[fill="currentColor"]')
.removeAttr('fill')
});
// create scss file with icon dimensions
gulp.src('src/assets/sprite/_svg-sprite.scss')
.pipe(consolidate('lodash', {
icons: data
}))
.pipe(gulp.dest('src/sass'));
// create preview
gulp.src('src/assets/sprite/svg-sprite.html')
.pipe(consolidate('lodash', {
icons: data
}))
.pipe(gulp.dest('app'));
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SVG Sprite Preview</title>
<style type="text/css" media="all">
h1 {
text-align: center;
}
.icons-list {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
.icon-box {
display: inline-block;
vertical-align: middle;
min-width: 200px;
min-height: 200px;
padding: 20px;
border-radius: 5px;
}
.icon-container {
min-height: 170px;
text-align: center;
font-size: 100px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
input:not([type=range]):not([type=color]) {
display: inline-block;
vertical-align: top;
width: 100%;
box-sizing: border-box;
font-size: 12px;
border-radius: 5px;
height: 30px;
padding: 0;
text-align: center;
border: 1px solid #CCC;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
-webkit-appearance: none;
}
.configure {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
}
.configure label:first-child input {
display: block;
width: 100%;
}
.configure label:last-child {
margin-top: 10px;
display: flex;
align-items: center;
}
.icon-class-name {
width: 70%;
}
.icon-unicode {
width: 30%;
}
<% _.forEach(icons, function(icon) { %>.<%= icon.name %> {
width: <%= icon.ratio %>em;
height: 1em;
}
<% }); %>
</style>
</head>
<body>
<h1>Icons: <span id="count"></span></h1>
<div class="configure">
<label>
<span>Size: <b><output for="size" id="size-value">100</output></b>px</span>
<input type="range" id="size" value="100" min="6" max="1000">
</label>
<label>
<span>Color:&nbsp;</span>
<input type="color" id="color">
</label>
</div>
<ul class="icons-list">
<% _.forEach(icons, function(icon) { %>
<li class="icon-box">
<input class="icon-class-name autoselect" type="text" value=".<%= icon.name %>" readonly>
<div class="icon-container">
<svg class="icon <%= icon.name %>">
<use xlink:href="/img/sprite.svg#<%= icon.name %>"></use>
</svg>
</div>
</li>
<% }) %>
</ul>
<script>
var change = document.getElementById('size');
var color = document.getElementById('color');
var changeVal = document.getElementById('size-value');
var count = document.getElementById('count');
var autoselect = document.getElementsByClassName('autoselect');
var icons = document.getElementsByClassName('icon');
Array.prototype.forEach.call(autoselect, function(el) {
el.onclick = function() {
this.focus();
this.select();
};
});
change.oninput = function() {
var val = this.value;
changeVal.value = val;
Array.prototype.forEach.call(icons, function(el) {
el.style.fontSize = val + 'px';
});
}
color.onchange = function() {
var val = this.value;
Array.prototype.forEach.call(icons, function(el) {
el.style.fill = val;
});
}
count.innerHTML = icons.length;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.