Adapt to gulp-iconfont 0.0.6

[nfroidure]

No description provided.

[backflip]

My current usage:

gulp.src(['icons/*.svg'])
    .pipe(plugins.iconfont({
        fontName: 'Icons'
    }))
        .on('codepoints', function(codepoints) {
            codepoints = _.map(codepoints, function(codepoint) {
                return {
                    name: codepoint.name,
                    codepoint: codepoint.codepoint.toString(16).toUpperCase()
                };
            });

            gulp.src('css/templates/icons.scss')
                .pipe(plugins.consolidate('lodash', {
                    codepoints: codepoints,
                    fontName: 'Icons'
                }))
                .pipe(gulp.dest('css/'));
        })
    .pipe(gulp.dest('font/'));

To be honest, I don't see the need for my plugin anymore. I'm using a custom CSS template for most projects anyway, so I don't need anything bundled.

However, in case someone likes the currently bundled templates and does not intend to change them: How about providing them as a Bower component? Then the setup would be the following:

npm install --save-dev gulp-iconfont gulp-consolidate handlebars bower
bower install --save gulp-iconfont-css

And the src path for the template would be something like bower_components/gulp-iconfont-css/icons.scss.

[backflip]

@nfroidure If we would emit the codepoints in hex format as well as providing the options as a second argument, this would look even cleaner:

gulp.src(['icons/*.svg'])
    .pipe(plugins.iconfont({
        fontName: 'Icons'
    }))
        .on('codepoints', function(codepoints, options) {
            gulp.src('css/templates/icons.scss')
                .pipe(plugins.consolidate('lodash', {
                    codepoints: codepoints,
                    fontName: options.fontName
                }))
                .pipe(gulp.dest('css/'));
        })
    .pipe(gulp.dest('font/'));

What do you think about this?

[nfroidure]

For the hex format, not sure how many people currently rely on the current format, so, i'm wondering if it's a good idea. I'll add an issue to Gulp iconfont late in the afternoon in order to get some feedaback.

For giving the option as a second argument, that's indeed a very good idea, i don't have time to do it right now, but feel free to PR if you wish.

[backflip]

I have opened a PR for the options.

Regarding hex: How about adding an additional property "codepointHex" to each codepoint element? Then nothing would break for current users.
I would open a PR, too, but the latest version of gulp-svgicons2svgfont does not seem to work with gulp-iconfont (The writable stream must be an instanceof Writable or Duplex.).

[backflip]

Never mind, I forgot to update plexer.

[nfroidure]

This does the job with just two more lines. I think we can keep the API as is, what you think ?

gulp.src(['icons/*.svg'])
    .pipe(plugins.iconfont({
        fontName: 'Icons'
    }))
        .on('codepoints', function(codepoints, options) {
            gulp.src('css/templates/icons.scss')
                .pipe(plugins.consolidate('lodash', {
                    codepoints: codepoints.map(function(codepoint) {
                      return codepoint.codepoint.toString(16).toUpperCase()
                    }),
                    fontName: options.fontName
                }))
                .pipe(gulp.dest('css/'));
        })
    .pipe(gulp.dest('font/'));

[backflip]

Not sure, isn't codepoints an array of objects with the properties name and codepoint?

[backflip]

But apart from this: What do you think of removing this plugin from NPM and just provide some default templates as a Bower module (and add above example to gulp-iconfont's README)?

[backflip]

Well, probably not remove it from NPM, but update the README to mark it as deprecated and add detailed instructions about using the Bower component (or own templates) instead.

[nfroidure]

For the Array of Objects, you're right, i've edited the comment.

For deprecating the module, let's ping stargazers: @morlay @charliecm @thomasflad @camry @roelvanhintum @basketofsoftkittens @tjeastmond @pocotan001 @cognitom @jmagnusson @gillesfabio @benjohnson @lmartins @eldh

On my side, il like the idea of letting it online, but also show how to do without it and people will choose knowing every concerns.

For the bower component, i'm not sure since it adds bower into the party and could annoy some people using NPM only (with browserify) to build their front-end.

On the other side, i don't know if there is a NPM way to provide templates. Maybe some template systems could allow you to "compile/wrap" the files in order to expose their content into a JavaScript module.

Another way could be to add a new recipe for icon fonts to the Gulp documentation. https://github.com/gulpjs/gulp/tree/master/docs/recipes

[morlay]

I agree with @nfroidure, so I just use nfroidure's repo into my workflow. https://github.com/morlay/icon-font-maker. ( my team mates like grunt better, I have to .. ) .

I think the base function be provided good enough, and the templates could be created by who use it. it is easy to do.

Then, thank to @nfroidure, your work faster our development.

[backflip]

To recap, for everyone new to this thread:

• As of version 0.0.6, gulp-iconfont provides a codepoints event emitting an array of {name: ICON_NAME, codepoint: DECIMAL_UNICODE} items, removing the need for this plugin. From now on, the recommended approach would be to use @nfroidure's example above. Recommending gulp-consolidate for the templating allows everyone to use their favorite template engine without changing the code a lot.
• Judging from the contributions, people seem to use the templates provided here for their own projects (/cc @miclf).
• Since the templates by themselves provide no logic, I'd suggest using Bower instead of NPM to publish them. I would create a Bower component with the current templates.

[miclf]

@backflip
I can only speak for my own project, of course, but I would happily switch to a custom template. In fact, it’s exactly what I did when I opened #15, in order to work around the issue. I could also refactor a bit and use @nfroidure’s example. Choosing one solution or the other wouldn’t make a big difference in my case.

I consider my own contributions to this repo only as suggestions to improve templates for ‘general use cases’ (i.e. when people don’t need/want to deal with a custom template, whatever the preprocessor they use).

Considering how easy it is to switch to a custom template (or to use the codepoints event on gulp-iconfont), I’m not sure it would be worthy to create a Bower package just to host default templates. That being said, these templates contain some clever bits and it would be a pity to just loose them. I don’t have a clear opinion on this point.

[pprince]

@nfroidure

The code you gave above does not work; Array.forEach does not return a value.

Also, it doesn't pass fontPath for use in the template.

[nfroidure]

@pprince replaced forEach per map, but if you have a working code, please, publish it here, i'll uodate my comment. Doesn't use gulp-consolidate in fact, so i'm not aware of it's API.

[pprince]

Ok. This is working, but be aware that 1) I just did it, and haven't tested it much, and 2) I'm a javascript n00b.

var gulp        = require('gulp');
var iconfont    = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

gulp.task('iconfont', function() {
    gulp.src(['src/iconfont/*.svg'])
        .pipe(iconfont({
            fontName: 'iconfont'
        }))
        .on('codepoints', function(codepoints, options) {
            codepoints.forEach(function(glyph, idx, arr) {
                arr[idx].codepoint = glyph.codepoint.toString(16)
            });
            gulp.src('src/sass/templates/_iconfont.scss')
                .pipe(consolidate('lodash', {
                    glyphs: codepoints,
                    fontName: options.fontName,
                    fontPath: '/fonts/'
                }))
                .pipe(gulp.dest('gen/sass'))
            ;
        })
        .pipe(gulp.dest('build/fonts'))
    ;
});

Along with a couple of fixes to the template from this repo:

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
        url('<%= fontPath %><%= fontName %>.woff') format('woff'),
        url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
        url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
}

%icon {
    font-family: "<%= fontName %>";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    text-transform: none;
}

@function icon-char($filename) {
    $char: "";
<% _.each(glyphs, function(glyph) { %>
    @if $filename == <%= glyph.name %> {
        $char: "\<%= glyph.codepoint %>";
    }<% }); %>

    @return $char;
}

@mixin icon($filename, $insert: before) {
    &:#{$insert} {
        @extend %icon;
        content: icon-char($filename);
    }
}

<% _.each(glyphs, function(glyph) { %>.icon-<%= glyph.name %> {
    @include icon(<%= glyph.name %>);
}
<% }); %>

[cognitom]

@pprince your sample code was really helpful for me. Thank you!

I've made another example that converts codepoints in the template.

<% _.each(glyphs, function(glyph) { %>
.<%= className %>-<%= glyph.name %>:before {
  content: "\<%= glyph.codepoint.toString(16).toUpperCase() %>"
}<% }); %>

It would keep the gulpfile clean, I think.

var fontName = 'symbols'; // set name of your symbol font

gulp.task('iconfont', function(){
  gulp.src(['src/icons/*.svg'])
  .pipe(iconfont({ fontName: fontName }))
  .on('codepoints', function(codepoints) {
    gulp.src('templates/fontawesome-style.css')
    .pipe(consolidate('lodash', {
      glyphs: codepoints,
      fontName: fontName,
      fontPath: '../fonts/', // set path to font (from your CSS file if relative)
      className: 'icon' // set class name in your CSS
    }))
    .pipe(rename({ basename:fontName }))
    .pipe(gulp.dest('dist/css/')); // set path to export your CSS
  })
  .pipe(gulp.dest('dist/fonts/')); // set path to export your fonts
});

A full example here.

[macbleser]

@pprince, @cognitom:

If you are running Sass version 3.3 or newer you can make your SCSS templates a little bit cleaner by taking advantage of the new map data structure.

Here is what I am currently using for my SCSS template:

@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot');
  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
       url('<%= fontPath %><%= fontName %>.woff') format('woff'),
       url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
       url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

%icon-base-styles {
  display: inline-block;
  font-family: "<%= fontName %>";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}

$icons: (
  <%= glyphs.map(function(glyph){ return glyph.name + ': "' + '\\' + glyph.codepoint.toString(16).toUpperCase() + '"' }).join(',\n  ') %>
);

@each $name, $icon in $icons {
  .<%= className %>-#{$name}:before {
    @extend %icon-base-styles;
    content: $icon;
  }
}

If you want to see how this looks once consolidated and compiled, you can take a look at this example.

[jefsnare]

@backflip What are the relevant tasks for this issue?