Skip to content

Webpack plugin that converts set of svg images into a fonts and CSS template

License

Notifications You must be signed in to change notification settings

itgalaxy/webfont-webpack-plugin

Repository files navigation

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.

About

Webpack plugin that converts set of svg images into a fonts and CSS template

Resources

License

Stars

Watchers

Forks

Packages

No packages published