Feature request - use pages as font weights

[eddywashere]

It would be really awesome if multiple pages could be interpreted as font weights. This way, an optimized icon could be served for different sizes, ex: sm, md, lg.

Another example is in the iconic docs https://useiconic.com/guides/how-to-use-the-icon-font/

[cognitom]

Hi @eddywashere!

Seems nice, but the name of the glyph may conflict. sketchtool uses the layer name as the file name exported. This could be a problem when we specify the same name to the layer in each pages in Sketch.app.

Solution A

Use different suffix in each pages like sm md lg or w4 w6 w8. No change for the template is needed.

<i class="s s-home-sm"></i>
<i class="s s-home-md"></i>
<i class="s s-home-lg"></i>

Solution B

Make separated Sketch files for each font weights, like 'yourfont-w4.sketch', 'yourfont-w8.sketch'. Then define multiple @font-face sections with different font-weight in CSS.

var gulp = require("gulp");
var rename = require("gulp-rename");
var sketch = require("gulp-sketch");
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
var foreach = require('gulp-foreach');
var path = require('path');

var fontname = 'yourfont';
var css_created = false;

gulp.task('symbols', function(){
  gulp.src(fontname + '-w*.sketch') // ex. 'yourfont-w4.sketch', 'yourfont-w8.sketch'
    .pipe(foreach(function(stream, file){
      var fontname_w = path.basename(file.path); // ex. 'yourfont-w4' or 'yourfont-w8'
      return stream
        .pipe(sketch({
          export: 'artboards',
          formats: 'svg'
        }))
        .pipe(iconfont({ fontName: fontname_w }))
        .on('codepoints', function(codepoints) {
          if (css_created) {
            return; // CSS file should be created just once
          }
          var options = {
            glyphs: codepoints,
            fontName: fontname,
            fontPath: '../fonts/', // set path to font (from your CSS file if relative)
            className: 's' // set class name in your CSS
          };
          gulp.src('templates/yourtemplate.css')
            .pipe(consolidate('lodash', options))
            .pipe(rename({ basename: fontname }))
            .pipe(gulp.dest('dist/css/')); // set path to export your CSS
          css_created = true;
        })
        .pipe(gulp.dest('dist/fonts/')); // set path to export your fonts
    })
});