webfont-webpack-plugin
Webpack plugin for webfont package
Last updated a year ago by evilebottnawi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install webfont-webpack-plugin 
SYNC missed versions from official npm registry.

webfont-webpack-plugin

NPM version Travis Build Status Build status dependencies Status devDependencies Status Greenkeeper badge

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

Contribution

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

Changelog

License

Current Tags

  • 1.0.0                                ...           latest (a year ago)

5 Versions

  • 1.0.0                                ...           a year ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 8
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |