Search code examples
gulpicon-fontssketchapp

Path direction in symbols of icon font

I'm making an icon font with this workflow:

  1. Design icons with Sketch app
  2. Generate SVG with gulp-sketch
  3. Generate icon font with gulp-iconfont

Results look right with OSX browsers, but the icons look bad in others (explorer on windows and android, at least).

I don't know in wich step is the fault, in the Sketch file or some other place.

Thank you in advance.

Resources for understand this question:

This is an screencapture of sketch app file. All paths are flattened and well orginized into a combined shape:

enter image description here

This is a screencapture of resut in windows10+explorer: http://contraindicaciones.net/secciones/

enter image description here

This is a screencapture of result in OSX+Firefox:

enter image description here

This is the entire gulpfile.js:

const
  gulp = require('gulp'),
  rename = require('gulp-rename'),
  sketch = require('gulp-sketch'),
  iconfont = require('gulp-iconfont'),
  consolidate = require('gulp-consolidate'),
  async = require('async'),
  runTimestamp = Math.round(Date.now()/1000)

/**
 * Font settings
 */
const
  // set name of your symbol font
  fontName = 'contraindi',
  // set class name in your CSS
  className = 's',
  // you can also choose 'foundation-style'
  template = 'fontawesome-style',
  // you can also choose 'symbol-font-16px.sketch'
  skethcFileName = 'symbol-font-16px.sketch'

/**
 * Recommended to get consistent builds when watching files
 * See https://github.com/nfroidure/gulp-iconfont
 */
const timestamp = Math.round(Date.now() / 1000)

gulp.task('symbols', () =>
  gulp.src('assets/sketch/*.sketch')
    .pipe(sketch({
      export: 'artboards',
      formats: 'svg'
    }))
    .pipe(gulp.dest('dist/SVGs/')) // salvar los SVG en una carpeta (aunque no es necesario)
    .pipe(iconfont({
      fontName,
      prependUnicode: true,
      formats: ['ttf', 'eot', 'woff', 'woff2'],
      timestamp,
      //log: () => {} // suppress unnecessary logging
    }))
    .on('glyphs', (glyphs) => {
      const options = {
        className,
        fontName,
        fontPath: '../fonts/', // set path to font (from your CSS file if relative)
        glyphs: glyphs.map(mapGlyphs)
      }
      gulp.src(`assets/templates/${ template }.css`)
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: fontName }))
        .pipe(gulp.dest('dist/css/')) // set path to export your CSS

      // if you don't need sample.html, remove next 4 lines
      gulp.src(`assets/templates/${ template }.html`)
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: 'sample' }))
        .pipe(gulp.dest('dist/')) // set path to export your sample HTML
    })
    .pipe(gulp.dest('dist/fonts/')) // set path to export your fonts
)

gulp.task('watch', () => gulp.watch('assets/sketch/*.sketch', ['symbols']))

/**
 * This is needed for mapping glyphs and codepoints.
 */
function mapGlyphs(glyph) {
  return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) }
}
Solution

  • I found the problem. It was in sketch app file. In the Layer menu, there is a "Path/Reverse order option". I shoud play with this option until direction of child paths must be the inverse of their parent paths.

    I dont know yet how to know the actual direction of a path in Sketch, but this is another question.