postcss-iconfont
Create SVG/TTF/EOT/WOFF/WOFF2 fonts from several SVG icons with PostCSS.
postcss-iconfont
is based on gulp-iconfont
, In the postcss
or webpack
environment, it is easier to convert svg
to webfont.
Installation
Install postcss-iconfont
as a development dependency:
npm install postcss-iconfont --save-dev
Usage
Node
Use iconfont in your script:
var postcss = ;var iconfont = ; var options = outputPath: './dist/fonts/'; ;
Webpack
Use iconfont in your webpack.config.js:
Webpack 1.x
{ return ... ... ;}
Webpack 2.x
plugins: options: ... postcss: ... ...
Options
basePath
Your base path that will be used for svg files with absolute CSS urls.
Type: String
Default: ./
stylesheetPath
Relative path to the folder that will keep your stylesheet file.
Type: String
Default: null
outputPath
Relative path to the folder that will keep your output font file.
Type: String
Default: ./
publishPath
The url to the output directory resolved relative to the HTML page
Type: String
Default: ``
formats
the same gulp-iconfont
formats
Type: String
Default: ['svg', 'ttf', 'eot', 'woff']
hooks
Type: Object
Default: {}
hooks.onUpdateRule
Hook that allows to rewrite the CSS output.
Type: function
Default: null
options.*
The gulp-iconfont are available:
options.fontName(The configuration is invalid, and this value is taken in the stylefont-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
Preparing SVG's
See: https://github.com/nfroidure/gulp-iconfont#preparing-svgs
Example
└┬ demo/ ├─┬ css/ │ └─ style.css ├── fonts/ └─┬ svg/ ├─ arrow-up-left.svg └─ arrow-up-right.svg
style.css
//
// [