[Gulp] Génération d’une police d’icônes avec template en SASS

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.

@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; }
    }
}

@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

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(){});

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 :

.element{
    &:after{
        @include init-icon-font();
        content: '\EA13';
    }
    &.is-active{
        &:after{
            transform : translateY(-50%) rotate(180deg);
        }
    }
}

.element{

&:after{

@include init-icon-font();

content: '\EA13';

}

&.is-active{

&:after{

transform : translateY(-50%) rotate(180deg);

}

(bonus) Markup HTML planche d’icônes

<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>

</ul>

.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:

// 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('./'))
    }
});

// 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:

.icon-calendar {
    @include icon(calendar);
}
.icon-circle {
    @include icon(circle);
}
.icon-sun {
    @include icon(sun);
}
.icon-home {
    @include icon(home);
}

.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.

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

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

Articles récents

Catégories

Archives

Méta