html template

[peter-mouland]

If i created a way for this plug to also generate an html template, would you accept it?

my first attempt i fear is not good enough (simply adding |html #L33) as you have to call iconfontCSS twice in your gulpFile (along with iconFont twice).

my second attempt was to create a htmlTemplate config option, but this meant i used a global streamConfig to get around a closure problem with streams, plus the output was only ever a single file rather than the chosen extension and a html file.

Do you know how to create and save 2 separate streams or this against how gulp should work?

[peter-mouland]

just to add, the reason for this request is to automatically create a page where the icons can be demoed. Without this, the demo page would have to manually updated with each new icon added to the font set.

[backflip]

Hey Peter

Thanks for the input, this was already briefly discussed in #22.

The situation is the following:

• This plugin is deprecated. It's much easier to just use the codepoints of gulp-iconfont event as described in Adapt to gulp-iconfont 0.0.6 #9 (comment).
• As part of the codepoint event listener, you could both generate the CSS/SCSS/whatever and an HTML file:

gulp.src(['icons/*.svg'])
    .pipe(plugins.iconfont({
        fontName: 'Icons'
    }))
        .on('codepoints', function(codepoints, options) {
            // Create CSS
            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/'));

            // Create HTML preview
            gulp.src('html/templates/preview.html')
                .pipe(plugins.consolidate('lodash', {
                    codepoints: codepoints.map(function(codepoint) {
                      return codepoint.codepoint.toString(16).toUpperCase()
                    }),
                    fontName: options.fontName
                }))
                .pipe(gulp.dest('html/'));
        })
    .pipe(gulp.dest('font/'));

[peter-mouland]

thanks for your quick response - i missed that you could achieve this from within gulp-iconfont directly

[amcdnl]

@backflip Would you mind sharing your template you use above? I think this would be a handy thing to mention on the readme too.

[backflip]

@amcdnl You should be able to reuse any template here: https://github.com/backflip/gulp-iconfont-css/tree/master/templates

I'm mostly using https://github.com/unic/estatico/blob/develop/source/assets/css/templates/_iconfont.scss (based on Handlebars).

EDIT: Just realized you might be more interested in the HTML template, sorry. However, I don't think I have ever used this functionality and the code block above was rather intended as an example.