基于PostCSS 处理多个SVG文件生成 SVG/TTF/EOT/WOFF/WOFF2 字体图标
postcss-iconfont
是基于 gulp-iconfont
进行封装, 在 postcss
或 webpack
的构建环境下,能更方便地把 svg
文件转换为 webfont。
安装依赖 postcss-iconfont
:
npm install postcss-iconfont --save-dev
在script中使用 iconfont :
var postcss = require('postcss');
var iconfont = require('postcss-iconfont');
var options = {
outputPath: './dist/fonts/'
};
postcss([iconfont(options)])
.process(css)
.then(function(result) {
fs.writeFileSync('./dist/style.css', result.css);
});
在 webpack.config.js 中使用 iconfont :
Webpack 1.x
postcss: function () {
return [
...
iconfont({
outputPath: './dist/fonts/'
})
...
];
}
Webpack 2.x
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
...
postcss: [
...
iconfont({
outputPath: './dist/fonts/'
})
]
}
}),
...
]
根目录位置,通常用于 font-face
中 url
是绝对路径情况
类型: String
默认值: ./
样式文件所在的目录路径
类型:String
默认值:process.cwd()
生成的字体文件存放目录路径
类型:String
默认值:``
字体文件的发布路径
类型:String
默认值:``
生成的字体格式,详细查看 gulp-iconfont
的formats
类型:String
默认值:['svg', 'ttf', 'eot', 'woff']
回调钩子
类型:Object
默认值:{}
更改CSS规则后触发的回调
类型:function
默认值:null
gulp-iconfont 的配置也能使用:
options.fontName(配置无效,这个值在样式中font-family
中获取)- options.autohint
- options.fontWeight
- options.fontStyle
- options.fixedWidth
- options.centerHorizontally
- options.normalize
- options.fontHeight
- options.round
- options.descent
- options.metadata
- options.startUnicode
- options.prependUnicode
- options.timestamp
See: https://github.com/nfroidure/gulp-iconfont#preparing-svgs
└┬ demo/
├─┬ css/
│ └─ style.css
├── fonts/
└─┬ svg/
├─ arrow-up-left.svg
└─ arrow-up-right.svg
style.css
// before
@font-face {
font-family: 'iconfont';
src: url('./fonts/*.svg');
font-weight: normal;
font-style: normal;
}
// after
@font-face {
font-family: 'iconfont';
src: url('fonts/iconfont.eot');
src: url('fonts/iconfont.eot#iefix') format('embedded-opentype'),
url('fonts/iconfont.ttf') format('truetype'),
url('fonts/iconfont.woff') format('woff'),
url('fonts/iconfont.svg?#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="iconfont-"], [class*=" iconfont-"] {
font-family: 'iconfont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont-arrow-up-left:before {
content: "\EA01";
}
.iconfont-arrow-up-right:before {
content: "\EA02";
}