Awesome

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

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

Usage

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

entry.js

import "webfont.css";

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

@import "webfont.scss";

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

entry.js

import "any-file.scss";

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