https://github.com/flgmwt/webpack-iconfont-plugin
SVG to icon font conversion plugin for webpack.
https://github.com/flgmwt/webpack-iconfont-plugin
Last synced: about 1 month ago
JSON representation
SVG to icon font conversion plugin for webpack.
- Host: GitHub
- URL: https://github.com/flgmwt/webpack-iconfont-plugin
- Owner: FLGMwt
- License: mit
- Created: 2017-10-25T19:28:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-03T03:04:57.000Z (over 4 years ago)
- Last Synced: 2025-04-14T23:13:27.446Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 103 KB
- Stars: 1
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# webpack-iconfont-plugin
SVG to iconfont conversion plugin for webpack.
## Features:
* Supported font formats: WOFF2, WOFF, EOT, TTF and SVG.
* Semantic: uses Unicode private use area.
* Cross-browser: IE8+.
* Generates SCSS file, custom templates possible.
## Usage:
`SCSS Styles:`
```scss
@import 'iconfont.scss';
a.arrow {
&::before {
@extend %iconfont;
content: $iconfont-arrow;
}
}
```
`Webpack config:`
```js
import IconfontPlugin from 'webpack-iconfont-plugin';
import path from 'path';
export default {
module: {
loaders: [
...
]
},
plugins: [
new IconfontPlugin({
svgs: path.resolve(__dirname, '../assets/svg-icons/**/*.svg'),
fonts: path.resolve(__dirname, '../assets/fonts'),
styles: path.resolve(__dirname, '../styles/_iconfont.scss')
})
],
...
};
```
## Options
#### `svgs` (required)
Type: `String`
File path(s) or glob(s) to svg icons.
#### `fonts` (required)
Type: `String`
Destination for generated font files (directory).
#### `styles` (required)
Type: `String`
Destination for generated scss file (file path).
#### `cssFontPath`
Type: `String` Default value: `/static/fonts/`
Path that the generated fonts should be referenced with in the CSS styles.
#### `template`
Type: `String` Default value: `scss`
Type of built in style templates ('scss', 'scss-mixins') or path to custom template.
#### `fontName`
Type: `String` Default value: `iconfont`
This dtermines both the font family name (e.g. `font-family: 'iconfont'`, as well as the prefix for scss variables, mixins and classnames (e.g. `.iconfont-arrow`).
#### `fontHeight`
Type: `Number` Default value: `MAX(icons.height)`
The outputted font height (defaults to the height of the highest input icon).
#### `normalize`
Type: `Boolean` Default value: `false`
Normalize icons by scaling them all to the height of the highest icon.