- Tutoriel : ICONFONT : GÉNÉRATION VIA GULP.JS
- Plug-in Gulp sur github.com : gulp-icon-font – Générer une police d’icône (iconfont) à partir de fichiers SVG.
- Sur npmjs.com – gulp-iconfont – Create icon fonts from several SVG icons.
- How to generate an iconfont styleguide with Gulp
Attention : préférer les sources hébergées sur github.com à celles présentes dans les codebits du tutoriel.
template sass
Par rapport au tutoriel et aux sources du plug-in sur github.com, notez la présence d’un mixin init-icon-font.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@mixin init-icon-font(){ display: inline-block; font-family: '<%= fontName %>'; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-transform: none; } @font-face { font-family: '<%= fontName %>'; font-weight: normal; font-style: normal; src: url('<%= fontPath %><%= fontName %>.eot'); src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'); } .<%= className %>[class^="<%= className %>-"], .<%= className %>[class*=" <%= className %>-"], [class*="-<%= className %>-"]{ @include init-icon-font(); } $icons: ( <%= glyphs.map(function(glyph) { return glyph.name + ': \'' + '\\' + glyph.unicode[0].charCodeAt(0) .toString(16).toUpperCase() + '\'' }).join(',\n ') %> ); @each $name, $icon in $icons { .<%= className %>-#{$name} { &:before { content: $icon; } } } |
gulpfile.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var gulp = require('gulp'); sass = require('gulp-sass'); iconfont = require('gulp-iconfont'); gulp.task('iconfont', function () { gulp.src('src/icons/**/*.svg') .pipe(iconfont({ fontName: 'project' , prependUnicode: true , formats: ['ttf', 'eot', 'woff', 'woff2'] , timestamp: runTimestamp , normalize: true , fontHeight: 1001 , centerHorizontally: true })) .on('glyphs', function (glyphs) { console.log(glyphs); gulp.src('src/sass/templates/_icons.scss') .pipe(consolidate('lodash', { glyphs: glyphs , fontName: 'project' , fontPath: '/media/themes/project/icons/' , className: 'icon' })).on('error', function(e){console.log(e);}) .pipe(gulp.dest('src/sass')); }) .pipe(gulp.dest('image/icons')); }); gulp.task('sass', function(){ return gulp.src('src/sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('style')) }); // Watch every tasks with 'gulp watch' gulp.task('watch', ['iconfont', 'sass'], function(){}); |
Utilisation dans des sources SASS :
|
1 2 3 4 5 6 7 8 9 10 11 |
.element{ &:after{ @include init-icon-font(); content: '\EA13'; } &.is-active{ &:after{ transform : translateY(-50%) rotate(180deg); } } } |
(bonus) Markup HTML planche d’icônes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul class="doc-iconlist"> <li><i class="icon icon-"></i><p>icon icon-</p></li> </ul> <style type="text/css"> .doc-iconlist li{ width: 12.50%; height: 115px; padding: 10px; float: left; text-align: center; border: 1px solid #fff; background-color: #eee; } .doc-iconlist i{ font-size: 2.6em; } </style> |
How to generate an iconfont styleguide with Gulp
Source: How to generate html page with elements from scss in Gulp
sur Stack Overflow
Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:
Gulpfile.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// npm i gulp gulp-jade --save-dev var gulp = require('gulp'), jade = require('gulp-jade'), fs = require('fs'); gulp.task('default', function () { var re = new RegExp(/icon-(\w+)/); fs.readFile('./test.scss', 'utf8', function(err, data) { var icons = [] if(err) return console.log(err); data.split('\r\n').forEach(function(icon) { var match = re.exec(icon); if(match) icons.push('icon-' + match[1]) }) // the gulp-jade plugin expects template local data to be an object // such as: // {locals: YOUR_DATA_OBJECT_TO_BIND} bind({locals: {icons: icons}}) }); // method that will bind data to your template var bind = function(data) { gulp.src('./template.jade') .pipe(jade(data)) .pipe(gulp.dest('./')) } }); |
./test.scss:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.icon-calendar { @include icon(calendar); } .icon-circle { @include icon(circle); } .icon-sun { @include icon(sun); } .icon-home { @include icon(home); } |
./template.jade
The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.
|
1 2 3 4 5 6 7 8 9 |
doctype html html(lang="en") head // you may want to add a link to your compiled `css` file for a nicer display body for ic in icons i(class=ic) |. = ic |
