gulp-iconfont-css

Generate (S)CSS file for icon font created with Gulp

Warning

Recent versions of gulp-iconfont emit a glyphs (or codepoints < 4.0.0) event (see docs) which should likely be used instead of the workflow described below. However, it will continue to work as expected. The future of this plugin will be discussed in https://github.com/backflip/gulp-iconfont-css/issues/9.

Usage

First, install gulp-iconfont and gulp-iconfont-css as development dependencies:

npm install --save-dev gulp-iconfont gulp-iconfont-css

Then, add it to your gulpfile.js. Important: gulp-iconfont-css has to be inserted before piping the files through gulp-iconfont.

var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');

var fontName = 'Icons';

gulp.task('iconfont', function(){
  gulp.src(['app/assets/icons/*.svg'])
    .pipe(iconfontCss({
      fontName: fontName,
      path: 'app/assets/css/templates/_icons.scss',
      targetPath: '../../css/_icons.scss',
      fontPath: '../../fonts/icons/'
    }))
    .pipe(iconfont({
      fontName: fontName
     }))
    .pipe(gulp.dest('app/assets/fonts/icons/'));
});

gulp-iconfont-css works well with gulp-iconfont but you can use it in a more modular fashion by directly using gulp-svgicons2svgfont, gulp-svg2tff, gulp-ttf2eot, gulp-ttf2woff and/or gulp-ttf2woff2.

API

iconfontCSS(options)

options.fontName

Type: String

The name of the generated font family (required). Important: Has to be identical to iconfont's fontName option.

options.path

Type: String

The template path (optional, defaults to css template provided with plugin).If set to 'scss' or 'less', the corresponding default template will be used. See templates

options.targetPath

Type: String

The path where the (S)CSS file should be saved, relative to the path used in gulp.dest() (optional, defaults to _icons.css). Depennding on the path, it might be necessary to set the base option, see https://github.com/backflip/gulp-iconfont-css/issues/16.

options.fontPath

Type: String

Directory of font files relative to generated (S)CSS file (optional, defaults to ./).

options.cssClass

Type: String

Name of the generated CSS class/placeholder. Used for mixins and functions, too. See https://github.com/backflip/gulp-iconfont-css/tree/master/templates. Default is icon.

options.engine

Type: String

The template engine to use (optional, defaults to lodash). See https://github.com/visionmedia/consolidate.js/ for available engines. The engine has to be installed before using.



gulp-iconfont-css

Generate (S)CSS file for icon font created with Gulp

警告

最近版本的 gulp-iconfont 会发出 glyphs (或 codepoints < / code>&lt; 4.0.0)事件(请参阅文档),可能会使用它们而不是下面描述的工作流程。但是,它将继续按预期工作。 这个插件的未来将在 https://github.com/backflip/gulp-iconfont-css中讨论/ issues / 9 。

用法

首先,将 gulp-iconfont gulp-iconfont-css 安装为开发依赖关系:

npm install –save-dev gulp-iconfont gulp-iconfont-css

然后,将其添加到您的 gulpfile.js 中。 重要 gulp-iconfont-css 必须在之前插入通过 gulp-iconfont p>

var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');

var fontName = 'Icons';

gulp.task('iconfont', function(){ gulp.src(['app/assets/icons/*.svg']) .pipe(iconfontCss({ fontName: fontName, path: 'app/assets/css/templates/_icons.scss', targetPath: '../../css/_icons.scss', fontPath: '../../fonts/icons/' })) .pipe(iconfont({ fontName: fontName })) .pipe(gulp.dest('app/assets/fonts/icons/')); });

gulp-iconfont-css
适用于 gulp-iconfont ,但您可以通过直接使用 gulp-svgicons2svgfont gulp-svg2tff gulp-ttf2eot gulp-ttf2woff 和/或 gulp-ttf2woff2 p>

API

iconfontCSS(options)

options.fontName

类型: String

生成的字体系列的名称(必需)。 重要:必须与iconfont的 fontName 选项相同。

options.path

类型: String

模板路径(可选,默认为插件提供的 css 模板)。如果设置为‘scss’‘less’将使用相应的默认模板。请参阅模板

options.targetPath

类型: String

相对于 gulp.dest()中使用的路径(可选,默认为 _icons.css ),应保存(S)CSS文件的路径。在路径上,可能需要设置 base 选项,请参阅 https ://github.com/backflip/gulp-iconfont-css/issues/16

options.fontPath

类型: String

相对于生成(S)CSS文件的字体文件的目录(可选,默认为 ./ )。

options.cssClass

类型: String

生成的CSS类/占位符的名称。也用于混合和功能。请参阅 https://github.com/backflip/gulp-iconfont-css/tree/master/templates 默认为图标

options.engine

类型: String

要使用的模板引擎(可选,默认为 lodash )。 有关可用的引擎,请参阅 https://github.com/visionmedia/consolidate.js/ 。引擎必须在使用前安装。




相关问题推荐