• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

nfroidure/gulp-iconfont: Create icon fonts from several SVG icons

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

nfroidure/gulp-iconfont

开源软件地址(OpenSource Url):

https://github.com/nfroidure/gulp-iconfont

开源编程语言(OpenSource Language):

JavaScript 78.7%

开源软件介绍(OpenSource Introduction):

gulp-iconfont

Create SVG/TTF/EOT/WOFF/WOFF2 fonts from several SVG icons with Gulp.

NPM version Build status Dependency Status devDependency Status Coverage Status Code Climate

You can test this library with the frontend generator.

Warning: While this plugin may still be useful for fonts generation or old browser support, you should consider using SVG icons directly. Indeed, when i created gulp-iconfont and all its related modules, using SVG icons was just not realistic for a wide browser suppport but i was already conviced that SVG was the future, that's why i wanted my SVG source files to sit separated in a folder. So, now, just enjoy switching to SVG with almost no effort :). Was a great open source journey with you all!

More info on with using SVG over icon fonts.

Usage

First, install gulp-iconfont as a development dependency:

npm install --save-dev gulp-iconfont

Then, add it to your gulpfile.js:

var iconfont = require('gulp-iconfont');
var runTimestamp = Math.round(Date.now()/1000);

gulp.task('Iconfont', function(){
  return gulp.src(['assets/icons/*.svg'])
    .pipe(iconfont({
      fontName: 'myfont', // required
      prependUnicode: true, // recommended option
      formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
      timestamp: runTimestamp, // recommended to get consistent builds when watching files
    }))
      .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        console.log(glyphs, options);
      })
    .pipe(gulp.dest('www/fonts/'));
});

gulp-iconfont bundles several plugins to bring a simpler API (gulp-svgicons2svgfont, gulp-svg2tff, gulp-ttf2eot, gulp-ttf2woff) for more flexibility, feel free to use them separately.

If some font glyphs aren't converted properly you should add the normalize:true option and a fontHeight greater than 1000 (fontHeight: 1001).

Make your CSS

To use this font in your CSS, you could add a mixin like in this real world example. You can also generate your CSS automatically with gulp-iconfont-css.

It's also easy to make a CSS template by yourself. Like this example, gulp-consolidate is useful to handling such a template. The template is outdated, change every occurrence of glyph.codepoint.toString(16).toUpperCase() to glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase(), otherwise it will not work.

var async = require('async');
var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

gulp.task('Iconfont', function(done){
  var iconStream = gulp.src(['assets/icons/*.svg'])
    .pipe(iconfont({ fontName: 'myfont' }));

  async.parallel([
    function handleGlyphs (cb) {
      iconStream.on('glyphs', function(glyphs, options) {
        gulp.src('templates/myfont.css')
          .pipe(consolidate('lodash', {
            glyphs: glyphs,
            fontName: 'myfont',
            fontPath: '../fonts/',
            className: 's'
          }))
          .pipe(gulp.dest('www/css/'))
          .on('finish', cb);
      });
    },
    function handleFonts (cb) {
      iconStream
        .pipe(gulp.dest('www/fonts/'))
        .on('finish', cb);
    }
  ], done);
});

Issues

Add issues to the right repos:

  • the plugin doesn't work at all, submit your issue in this repo.
  • every font doesn't display as expected: submit the issue to the svgicons2svgfont repository.
  • only some fonts are damaged? Please look at the font format the targeted browser actually use and then, submit your issue to one of those projects: svg2ttf, ttf2eot, ttf2woff.

API

iconfont(options)

options.formats

Type: Array Default value: ['ttf', 'eot', 'woff'] Possible values: ['svg', 'ttf', 'eot', 'woff', 'woff2']

Since SVG fonts are deprecated in some (every ?) browsers, they are disabled per default.

Also the WOFF2 fonts are disabled since it seems to cause issues on some setup (see #64).

options.autohint

Type: Boolean|String Default value: false

If ttfautohint is installed on your system, you may want to auto hint your fonts. Beware that this is an experimental and untested feature (beware to use at least the 0.93 version).

If the value is a string, it is taken to be the path to the ttfautohint binary. Otherwise, ttfautohint is searched in $PATH.

options.*

The svgicons2svgfont are available:

  • options.fontName (required)
  • options.fontWeight
  • options.fontStyle
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.round
  • options.descent
  • options.metadata
  • options.log

So are the gulp-svgicons2svgfont:

  • options.startUnicode
  • options.prependUnicode

And the gulp-svg2ttf:

  • options.timestamp

Preparing SVG's

Beware that your SVG icons must have a high enough height. 500 is a minimum. If you do not want to resize them, you can try to combine the fontHeight and the normalize option to get them in a correct size.

Inkscape

Degroup every shapes (Ctrl+Shift+G), convert to pathes (Ctrl+Maj+C) and merge them (Ctrl++). Then save your SVG, prefer 'simple SVG' file type.

Illustrator

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Leave the rest unchecked.

More in-depth information: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Sketch

Sketch is a relatively new drawing tool on Mac. With help of Sketch Tools and gulp-sketch, you can directly create fonts from your Sketch file. No need to export intermediate SVGs.

Directly create fonts from your Sketch file

Here is a sample repo "Symbols for Sketch".

  1. Download the zipped repo and extract it.
  2. Go to the directory. $ cd path/to/dir
  3. Install some tools. $ npm install
  4. Create fonts and CSS $ gulp symbols

Contributing

Feel free to push your code if you agree with publishing under the MIT license.

Stats

NPM NPM




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap