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. |