https://github.com/zner0l/postcss-fonticons
A postcss plugin that allows you to create your icon font on the fly
https://github.com/zner0l/postcss-fonticons
hacktoberfest
Last synced: about 1 year ago
JSON representation
A postcss plugin that allows you to create your icon font on the fly
- Host: GitHub
- URL: https://github.com/zner0l/postcss-fonticons
- Owner: zner0L
- License: mit
- Created: 2018-11-04T22:01:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T19:18:39.000Z (about 3 years ago)
- Last Synced: 2025-03-09T13:45:49.564Z (over 1 year ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-fonticons
postcss-fonticons is a [postcss](https://postcss.org) 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('.svg');
}
```
You can also set the icon size in the same declaration:
```
.icon-class {
font-icon: 80% url('.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. |