Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

webpack-webfont

Package Overview
Dependencies
5
Maintainers
1
Versions
10
Issues
File Explorer

Advanced tools

webpack-webfont

Webpack plugin for webfont package

    0.0.1-alpha.10latest

Version published
Maintainers
1
Yearly downloads
12,215
increased by51.1%

Weekly downloads

Changelog

Source

0.0.1-alpha.10 - 2017-09-22

  • Fixed: regression error after fix infinity recompilation.

Readme

Source

webpack-webfont

NPM version Travis 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 webpack-webfont

Usage

For CSS:

@import 'webfont.css'; import WebfontPlugin from '../../Plugin'; import path from 'path'; export default { entry: path.resolve(__dirname, '../fixtures/entry.js'), output: { path: path.resolve(__dirname, '../build'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.css/, loaders: [ 'style', 'css' ] }, { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }, { loader: 'url-loader', test: /\.(svg|eot|ttf|woff|woff2)?$/ }, ] }, resolve: { modulesDirectories: ["web_modules", "node_modules"] }, plugins: [ new WebfontPlugin({ files: path.resolve(__dirname, '../fixtures/svg-icons/**/*.svg'), css: true, cssTemplateFontPath: './fonts/', dest: { fontsDir: path.resolve(__dirname, '../fixtures/css/fonts'), css: path.resolve(__dirname, '../fixtures/css/webfont.css'), } }) ] };

For SCSS:

@import 'webfont.scss'; a.avatar { &::before { @extend %webfont; content: $webfont-avatar; } } import WebfontPlugin from '../../Plugin'; import path from 'path'; export default { entry: path.resolve(__dirname, '../entry.js'), output: { path: path.resolve(__dirname, '../build'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.css/, loaders: [ 'style', 'css' ] }, { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }, { loader: 'url-loader', test: /\.(svg|eot|ttf|woff|woff2)?$/ }, ] }, resolve: { modulesDirectories: ["web_modules", "node_modules"] }, plugins: [ new WebfontPlugin({ files: path.resolve(__dirname, '../svg-icons/**/*.svg'), css: true, cssFormat: 'scss', cssTemplateFontPath: './fonts/', dest: { fontsDir: path.resolve(__dirname, '../scss/fonts'), css: path.resolve(__dirname, '../scss/_webfont.scss'), } }) ] };

Options

  • General options - see webfont options. Some options are required.

  • dest - (required) generated files.

    • fontsDir - (required) directory fonts saving.
    • stylesDir - (optional) directory styles saving.
    • outputFilename - (optional) Set the filename of the generated styles file

Contribution

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

Changelog

License

Keywords

FAQs

What is webpack-webfont?

Webpack plugin for webfont package

Is webpack-webfont popular?

The npm package webpack-webfont receives a total of 269 weekly downloads. As such, webpack-webfont popularity was classified as not popular.

Is webpack-webfont well maintained?

We found that webpack-webfont demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 22 Sep 2017
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc