postcss-fonticons

postcss-fonticons is a postcss plugin, generating iconfonts from svg paths in your css. It works with postcss versions > 8.0.0.

Usage

In your css, add the following delcaration to your selectors to make then contain a font-icon:

.icon-class {
    font-icon: url('<your-icon>.svg');
}

You can also set the icon size in the same declaration:

.icon-class {
    font-icon: 80% url('<your-icon>.svg');
}

To use the plugin, add it to your postcss.config.js, like so:

module.exports = {
    plugins: [
        require('postcss-fonticons')({
            iconPath: path.resolve(__dirname, '.'),
            enforcedTimestamp: 1528942455,
            fontName: 'example-font',
        }),
    ],
};

You can (and likely should) set the following options:

Option	Default	Comment
`iconPath`	`'./icons/'`	Set this to the directory where the icon urls should be resolved to
`enforcedSvgHeight`	`1000`	The svg size requires all svgs to have the same height usually scaling the icons to 1000px should be fine, but if you prefer another value set it here.
`fontName`	`'postcss-fonticons-generated-font'`	Use a unique font name to prevent collisions.
`enforcedTimestamp`	`undefined`	UNIX timestamp as a number to overwrite the timestamp in the TTF conversion step. Set this to a fixed value to get the same build results in every run.

zner0L/postcss-fonticons

postcss-fonticons

Usage