cognitom / symbols-for-sketch

Symbol font templates for Sketch.app
680 stars 76 forks source link

SCSS template instead of css template #24

Closed kbardi closed 8 years ago

kbardi commented 8 years ago

Hi, I'm trying to generate a scss file for my icons instead of the standard css. It's because then I run other process over that file, and I need to use that format. Is it possible to use a scss template? How can I generate a scss output file? My process generate the fonts files, and if I use a css template it runs ok, but not with scss.

This is my gulp process:

var iconfont      = require('gulp-iconfont'),
    rename        = require('gulp-rename'),
    sketch        = require('gulp-sketch'),
    consolidate   = require('gulp-consolidate'),
    runTimestamp  = Math.round(Date.now()/1000),
    fontName      = 'font-lite';

gulp.task('iconfont', function() {
  return gulp.src([ app + 'templateFonts/symbols.sketch' ])
    .pipe(sketch({
      export: 'artboards',
      formats: 'svg'
    }))
    .pipe(iconfont({
      fontName: fontName,
      appendUnicode: false,
      formats: [ 'ttf', 'eot', 'woff', 'woff2', 'svg' ],
      timestamp: runTimestamp,
      normalize: true
    }))
    .on('glyphs', function(glyphs) {
      var options = {
        glyphs: glyphs.map(function(glyph) {
          return {
            name      : glyph.name,
            codepoint : glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()
          };
        }),
        fontName: fontName,
        fontPath: '../fonts/',
        className: 'icon'
      };
      /* CSS fonts */
      gulp.src(app + 'templateFonts/iconTemplate.scss')
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: fontName }))
        .pipe(gulp.dest(app + 'styles/04-Icons'));
      /* HTML example fonts (guide) */
      gulp.src(app + 'templateFonts/iconTemplate.html')
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: fontName }))
        .pipe(gulp.dest(app));
    })
    .pipe(gulp.dest(app + 'fonts'));
});

Thanks

kbardi commented 8 years ago

I didn't realise I could use the same gulp-rename to edit the file extension. Now I use the css template, but I rename to scss and everything is working.