Skip to content

zner0L/postcss-fonticons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.