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

backflip/gulp-iconfont-css: Create an SCSS file mapping the SVG files piped to g ...

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

开源软件名称(OpenSource Name):

backflip/gulp-iconfont-css

开源软件地址(OpenSource Url):

https://github.com/backflip/gulp-iconfont-css

开源编程语言(OpenSource Language):

CSS 59.5%

开源软件介绍(OpenSource Introduction):

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.

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, sass 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 #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

options.aliases

Type: Object

Use if you want multiple class names for the same font/svg value ie. use the github svg as .github or .git

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.

options.cacheBuster

Type: String

A string that will be appended to fonts URLs as query string (optional, defaults to the emtpy string, i.e. no cache buster). Query string heading questing mark ? is included automatically. Useful to dodge HTTP cache when deploying a modified iconfont.




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
scniro/gulp-clean-css: Minify css with clean-css.发布时间:2022-06-21
下一篇:
demohi/learning-gulp发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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