-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request - use pages as font weights #10
Comments
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 AUse different suffix in each pages like <i class="s s-home-sm"></i>
<i class="s s-home-md"></i>
<i class="s s-home-lg"></i> Solution BMake separated Sketch files for each font weights, like 'yourfont-w4.sketch', 'yourfont-w8.sketch'. Then define multiple 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
})
}); |
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/
The text was updated successfully, but these errors were encountered: