webfont-webpack-plugin


Webpack plugin for the webfont package.
Generating fonts from svg icons using the webpack. Supported any style (CSS, SCSS and own) of templates.

Install

``shell
npm install --save-dev webfont-webpack-plugin
`

Usage

Example for CSS with directly import (will be works for SCSS/Less/Etc):

entry.js

`js
import "webfont.css";
`

webpack.config.js

`js
import WebfontPlugin from "webfont-webpack-plugin";
import path from "path";

export default {
entry: path.resolve(__dirname, "../entry.js"),
output: {
path: path.resolve(__dirname, "../dist")
},
module: {
rules: [
{
test: /\.css/,
use: ["style-loader", "css-loader"]
},
{
loader: "url-loader",
test: /\.(svg|eot|ttf|woff|woff2)?$/
}
]
},
plugins: [
new WebfontPlugin({
files: path.resolve(__dirname, "../fixtures/svg-icons/*/.svg"),
dest: path.resolve(__dirname, "../fixtures/css/fonts"),
destTemplate: path.resolve(__dirname, "../fixtures/css")
})
]
};
`

Example for SCSS with import inside SCSS file (will be works for CSS/SCSS/Less/Etc):

any-file.scss

`scss
@import "webfont.scss";

a.avatar {
&::before {
@extend %webfont;
content: $webfont-avatar;
}
}
`

entry.js

`js
import "any-file.scss";
`

webpack.config.js

`js
import WebfontPlugin from "webfont-webpack-plugin";
import path from "path";

export default {
entry: path.resolve(__dirname, "../entry.js"),
output: {
path: path.resolve(__dirname, "../build")
},
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
loader: "url-loader",
test: /\.(svg|eot|ttf|woff|woff2)?$/
}
]
},
plugins: [
new WebfontPlugin({
files: path.resolve(__dirname, "../fixtures/svg-icons/*/.svg"),
dest: path.resolve(__dirname, "../fixtures/css/fonts"),
destTemplate: path.resolve(__dirname, "../fixtures/css")
})
]
};
`

Options

- files - (required) glob for files (non svg files ignored by default).
- dest - (required) path to generated files.
- destTemplate - (optional) path to generated template directory (if not passed used dest option value).
- bail` - (optional) break build if generation have error.
- additional options - see webfont options.

Related

- webfont - api for this package.

Contribution

Feel free to push your code if you agree with publishing under the MIT license.

Changelog

License