rollup-plugin-iconfont

Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html-preview file.

Features:

• Iconfont output formats: WOFF2, WOFF, EOT, TTF and SVG.
• Generates CSS file, js data file, html-preview file.
• Supports rollup and hot reloading at devlopment time. Iconfont files and css file will be rebuilt while any svg file changed or added, then page will refresh.
• Supports running by nodejs directly.
• Fixed output files with the same svg files. It means that if the svg files are not changed, all the output files(ttf,woff,css...) will not change, even though you build them again.
• High iconfont precision.

Install:

npm install rollup-plugin-iconfont

Usage:

You can use it by nodejs directly or use it in rollup

Use by nodejs directly

build/svg2font.js:

var rollupPluginIconfont = require('rollup-plugin-iconfont');
var path = require('path');
var dir = 'test/web_project/'
var options = {
    fontName: 'my-app-icon',
    // template: path.join(dir, 'src/fonts/css.njk'),
    svgs: path.join(dir, 'src/svgs/*.svg'),
    fontsOutput: path.join(dir, 'src/fonts/'),
    cssOutput: path.join(dir, 'src/fonts/font.css'),
    jsOutput: path.join(dir, 'src/fonts/fonts.js'),
    htmlOutput: path.join(dir, 'src/fonts/font-preview.html'),
    //formats: ['ttf', 'woff2', 'woff', 'svg'],
    cssPrefix: 'my-icon'
};

rollupPluginIconfont(options).buildStart()

Then you can run this command to build iconfont by svg:

node build/svg2font.js

Or you can set this command to script of package.json, and run it by npm.

Use by rollup

var rollupPluginIconfont = require('rollup-plugin-iconfont');
module.exports = {
    //... others
    plugins: [
        rollupPluginIconfont({
            fontName: 'my-app-icon',
            // template: path.join(dir, 'src/fonts/css.njk'),
            svgs: path.join(dir, 'src/svgs/*.svg'),
            fontsOutput: path.join(dir, 'src/fonts/'),
            cssOutput: path.join(dir, 'src/fonts/font.css'),
            jsOutput: path.join(dir, 'src/fonts/fonts.js'),
            htmlOutput: path.join(dir, 'src/fonts/font-preview.html'),
            //formats: ['ttf', 'woff2', 'woff', 'svg'],
            cssPrefix: 'my-icon'
        }),
    ]
};

Options

svgs (required)

Type: String File path(s) or glob(s) to svg icons. Recommend to use .svg like this: /src/project/src/.svg, this can watch svgs by directory.

fontsOutput (required)

Type: String Destination for generated font files (directory).

cssOutput (required)

Type: String Destination for generated css file (file name).

fontName

Type: String Default value: iconfont The font family name (e.g. font-family: 'iconfont').

htmlOutput

Type: String Default value: [path of cssOutput] + /font-preview.html. Or false value. Destination for generated html-preview file (file name). If false, no html and js output.

template

Type: String Default value: css Type of built in style templates ('css', 'scss', 'scss-mixins') or path to custom template.

formats

Type: Array of String Default value: ['svg', 'ttf', 'eot', 'woff2', 'woff'] The output iconfont formats.

cssPrefix

Type: String Default value: fontName Css className prefix.

Other options for advanced

Please refer to: https://www.npmjs.com/package/svgicons2svgfont https://www.npmjs.com/package/svg2ttf https://www.npmjs.com/package/ttf2eot https://www.npmjs.com/package/ttf2woff https://www.npmjs.com/package/ttf2woff2