Code Monkey home page Code Monkey logo

Comments (1)

cognitom avatar cognitom commented on August 29, 2024

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
    })
});

from symbols-for-sketch.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.