iconfont-glyphs-map
v0.2.1
Published
Iconfont glyphs map generator
Downloads
8
Readme
iconfont-glyphs-map
This is iconfont support package.
Simple Usage
You can use this gulp-iconfont.
gulp.task("font", function(){
return gulp.src(fontSetting.src)
.pipe(iconfont(fontSetting.options))
.on('glyphs', function(glyphs){
var glyphMap = glyphsMap(glyphs, true, true)
file("codepoint.json", JSON.stringify(glyphMap))
.pipe(gulp.dest("./dest/"))
})
.pipe(gulp.dest(fontSetting.dest))
})
API
glyphsMap(glyphs, [ appendChar, [ withQuote ] ])
return glyph Object
- glyphs (array)
- iconfont glyphs array
- appendChar (default
empty
)- You can add escape character
- For sass, you can append
"\\"
. - For json, you can append
"\\u"
.
- For sass, you can append
- You can add escape character
- withQuote (default
false
)- If true return code is quoted double quote
glyphsMap.array(glyphs, [ withQuote, [ withBackSlash ] ])
return glyph as Object Array
like this
var glyphs = [
{name: "account", code: "E001"}
]
glyphsMap.map(glyphs, [ withQuote, [ withBackSlash ] ])
return glyph as ES6 Map object
CSS output Example
Example for pipe iconfont
-> _map.scss
-> compile with font.scss
-> font.css
You can see full example
gulp.task("font-with-css", function(){
return gulp.src(fontSetting.src)
.pipe(iconfont(fontSetting.options))
.on('glyphs', function(glyphs){
var glyphMap = glyphsMap(glyphs, "\\", true)
file("_map.scss", JSON.stringify({
name: fontSetting.options.fontName,
path: fontSetting.options.dest,
glyphs: glyphMap
}))
.pipe(jsonSassObj({
prefix: "$font: ",
suffix: " !default;"
}))
.pipe(gulp.dest("./dest/scss"))
// use this
// https://github.com/inuscript/example-iconfont-sass/blob/master/scss/font.scss
gulp.src(["scss/*.scss","dest/scss/*.scss"])
.pipe(sass())
.pipe(gulp.dest("./dest/css"))
})
.pipe(gulp.dest(fontSetting.dest))
})