iconfont-inserter v0.1.0
在网页中使用 iconfont 的时候,我们通常可以写:
<i class="icon icon-like"></i>
然后我们的CSS中使用伪元素来插入字体编码:
.icon-like:after {
content: '\e61d';
}
但这并不兼容 IE6-7,需要在 HTML 中写入实体编码。
此外,为了开发方便,我们可能希望用某些可读的标识符来书写:
<i class="icon">like</i>
然后就能得到相应的 iconfont 效果。
本插件用于解决以上场景的问题:从CSS伪元素中析出字符编码(或指定 json 数据),将字符编码插入或替换到 HTML 中,并移除伪元素带有该字符的类名(可选)。
使用方法
附带两个案例:
- example/index.js 直接在 node 中运行
- example/gulpfile.js 在 gulp 流中使用
可参考以上例子使用。
书写约定
HTML:
<!-- 直接作为 innerHTML 表示 iconfont -->
<i class="icon">like</i>
<!-- 或者使用类名 -->
<i class="icon icon-like"></i>
以上两种模式不可同时处理,只能二选一。同时,需要为所有的 iconfont 指定某个公共类 icon
。
以上两种均可转换为
<i class="icon">&#xxxxx;</i>
如果需要跳过某些节点,则可以给节点添加一个类名 __skip
,则不会对该节点进行处理,同时生成的 HTML 也会移除 __skip
类名。
CSS:
如果从 CSS 中解析 iconfont 编码,则应该将编码书写到伪元素(before 或者 after 均可)选择器里,如下:
.icon-like:after {
content: '\e61d';
}
如果 HTML 采用 icon-like
类名来约定 iconfont,还可以通过配置决定是否在生成的 HTML 中移除这个类名。
JSON:
如果从 JSON 中解析 iconfont 对应编码,则以标识符为属性,编码为值进行书写。如:
{
"like": "\e61d"
}
在 Gulp 中使用
配置方法请参照例子中的 gulpfile.js,另扼要说明下配置项参数:
'use strict';
let gulp = require('gulp');
let inserter = require('../index').gulpify();
gulp.task('default', function() {
// 需要插入的 HTML 文件
return gulp.src('src/demo.html')
.pipe(inserter({
// 解析文件,CSS 或者 JSON
file: 'src/iconfont.css',
// 使用 iconfont 的节点的公共类名
className: 'icon',
// HTML 中是 className 匹配还是 innerHTML 匹配
fromClass: {
removeClass: true
}
}))
.pipe(gulp.dest('dist'))
});
关于 fromClass
:
默认:
false
,表示 HTML 里是用 innerHTML 表示 iconfont 的,如下写法:<i class="icon">like</i>
如果布尔值为
true
,则表示 HTML 里是 className 对应 iconfont,如下写法:<i class="icon icon-like"></i>
这种情况下,进行替换后,如需移除
icon-like
这个类名,则可以用一个对象作为值,即上面例子中的写法
8 years ago