fis3-postpackager-iconfont
iconfont
Last updated 5 years ago by helondeng .
BSD · Original npm · Tarball · package.json
$ cnpm install fis3-postpackager-iconfont 
SYNC missed versions from official npm registry.

fis3-postpackager-iconfont

安装

npm install fis3-postpackager-iconfont --save

背景

项目中使用iconfont时,需要将 SVG 转化成 font 字体文件,同时解决字体css的引入的问题,整个流程比较繁琐。

目标

在 html 标签上挂载和 svg 同名(或者有映射关系)的类名,构建解决:

  • SVG 转化 字体文件
  • css 的引入问题 通过上面的方式,可以使iconfont 的使用对开发透明 。 最终生成的字体存放在一个可配置的目录下,同时字体的css引入直接插入到html中, 在html中使用 <!--ICONFONT_PLACEHOLDER-->,占位符指明最终css的插入位置,如未执行,则会插入在 </head>之前

使用方式

fis-conf.js 配置

// settings
postpackager: fis.plugin('iconfont', {
    // 遍历js时,可以忽略的基础库
    ignore: ['zepto', 'badjs', 'mod', 'bj-report', 'tools', 'db.js'],
    // 匹配的icon前缀,即类名是i-xxx
    classPrefix: 'i-',
    // 本地svg路径,方便生成字体文件,这里可以使用脚本同步iconfont平台上的svg
    svgPath: '../svgs',
    // 字体的产出路径
    output: 'modules/common/fonts',
    // 引用字体的cdn前缀
    ttfCdn: 'http://7.url.cn/edu/activity/' + name,
    // 引用字体样式的cdn前缀,如果配置了该属性,
    // 最终的字体样式会已link方式引入到页面,
    // 否则会inline到页面中的占位符位置 <!--ICONFONT_PLACEHOLDER--> ,或者</head>前
    // 文件 md5
    useHash: true,
    cssCdn: 'http://7.url.cn/edu/activity/' + name,
    // 字体content使用的伪类,只能填after或者before,默认为after
    pseClass: 'before' // 伪类名
})

Current Tags

  • 0.4.0                                ...           latest (5 years ago)

14 Versions

  • 0.4.0                                ...           5 years ago
  • 0.3.6                                ...           5 years ago
  • 0.3.5                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.8                                ...           5 years ago
  • 0.2.7                                ...           5 years ago
  • 0.2.6                                ...           5 years ago
  • 0.2.5                                ...           5 years ago
  • 0.2.2                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |