iconfont-inserter

在网页中使用 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 这个类名，则可以用一个对象作为值，即上面例子中的写法