jeerbl / webfonts-loader Goto Github PK

View Code? Open in Web Editor NEW

189.0 4.0 57.0 3.52 MB

Make an icon font from SVGs!

Home Page: https://npm.im/webfonts-loader

License: MIT License

JavaScript 99.35% Shell 0.65%

webpack-loader font-icons icon-font ttf eot woff woff2 svg svg-icons

webfonts-loader's People

Contributors

Stargazers

Watchers

Forkers

mdudek crystalline stefanbackor vivihuang lgringo daqsam t0mtaylor jmhdez ilyasemenov rohan-buechner changegamers aelharrak davorpeic tfoxy bernhardbauer gnative chrispaynter sudomf ariesjia abhishekdev ferdinando-ferreira twebcast asvorak samuelsimoes imcuttle evandiamond xingxiuyi leiyangyou fivagod alxpez gilbertobotaro hazdik gyss sn3p vlmonk nueva-dev gilbertotomasone pcprashant andersk kelunik andreicnegrea michaeldietiker lerkor gseidel bdoooh simonbackx amanagr evanre egeren woobla zihmm uniqode-gmbh forzgc

webfonts-loader's Issues

Custom codepoints not working properly

I am using the codepoints option like so:
codepoints: { chevronLeft: '\F141', chevronRight: '\F142' }

The stylesheet renders with the correct content for these icons, however, when attempting to use the icon in the app, the icon seems to be missing from the generated font. It renders a square instead.

Suggestion: Add 'limit' option similar to url-loader

Currently there's similar embed flag to check if we want to include font data as a Base64 string to emitted CSS module. It makes us to manually track emitted font files sizes as we add or remove icons and switch the flag when the files are too big/small to be embedded/have a separate HTTP request. limit parameter would allow to configure it once and let the loader to decide whether to embed or not automatically.

Also currently it's not possible to i. e. embed most used format to reduce bundle size and preserve others as separate files loaded on demand. Even better solution would be to somehow push emitted font files into normal webpack flow and let it use the same loaders as for other font files.

Question: Can publicPath be set to './' in the generated file?

Description
In a scenario where I am generating a CSS library and using font icons as a fallback, could I set the font-face paths to be a relative path in the generated file?

This way the CSS lib would load the files irrespective of the domain its injected into.

What I have tried
I have tried the suggestions in #28, but that does not seem to alter the output path with the current version.

Additional Info
Unless I am missing something, I guess the usage of nodejs url.resolve on this line would discard the relative paths in most scenarios.

> url.resolve('/','/iconpath')
'/iconpath' // path discarded 
> url.resolve('./','/iconpath')
'/iconpath' // path discarded 
> url.resolve('./','iconpath')
'iconpath' // path discarded 
> url.resolve('https://example.com','/iconpath')
'https://example.com/iconpath' // path kept

Not exporting CSS

Hello guys,

I'm trying to find out why my css font isnt being extracted!

The build is working great, my fonts are being generated but not the css, I'm really frustrated, I've read the docs 10 times, trying different configurations, almost giving up.

Here is my webpack config:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const is_production = process.env.NODE_ENV;

let appEntry = [
  'react-hot-loader/patch',
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/only-dev-server',
  './src/index.js'
];

if (is_production) {
  appEntry = ['./src/index.js'];
}

let config = {
  entry: {
    app: appEntry,
    vendors: [
      'script-loader!./src/vendors/olosws.js',
      'script-loader!./src/vendors/olos_cti.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: ''
  },
  devtool: is_production ? '' : 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: [
          /node_modules/
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              modules: false,
              importLoaders: 1,
              sourceMap: true
            }
          }, 
          'group-css-media-queries-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap'
        ]
      },
      {
        test: /\.font\.js/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: { url: false }
            },
            {
              loader: 'webfonts-loader',
              options: { publicPath: '.' }
            }
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }],
      }
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new ExtractTextPlugin({
      filename:'[name].css', 
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      assets: path.resolve(__dirname, './src/assets/')
    }
  }
};

if (is_production) {
  config.plugins.push(
    new UglifyJSPlugin(),
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  );
} else {
    config.devServer = {
      compress: true,
      contentBase: path.resolve(__dirname, 'dist'),
      hot: true,
      historyApiFallback: true,
      publicPath: '/'
    };
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = config;

Font config:

module.exports = {
  'files': [
    './assets/icons/*.svg'
  ],
  'fontName': 'eaglleicons',
  'classPrefix': 'icon-',
  'baseSelector': '.icon',
  'types': ['woff2', 'ttf'],
  'fileName': './fonts/[fontname].[ext]'
};

I put the require of font config in my index.js.

Any ideia of what I'm missing? I know that github isn't a support plataform but following the docs I'm not getting the desired results, sorry for any incovenience.

Relative Paths for URLs

Hi @jeerbl thanks for continuing to maintain this library! Pity the MIT licensing is causing issues with merging into webpack-contrib... hope that gets sorted out eventually as this is a critical plugin.

I have a hack in place for fontgen-loader, but I did create a issue for it in the old project

DragonsInn/fontgen-loader#30

Hopefully you will have something for this =)

Regards,
Daryl

extending generated class in sass files

Hello,
I need your help, please :)
I've been trying to configure webpack 2 config file to generate the font.
So far I've a working webfont embedded but it doesn't work if I remove the embed query in the config file.

can we specify a destination path ? because 'dest' is ignored the path is always the root './....tff'
how to extend in sass files the generated webfont and classes

please..
thank you in advance

webfonts-loader does not generate SCSS files

Hello,
I am trying to get scss from it using the following configs:
webpack.config.js:

var ROOT = path.resolve(__dirname, 'web/assets/mail');
var config = {
 module: {
       ...
        rules: [
             {
                test: /\.font\.(js|json)$/,
                include: PATH.FONTS,
                use: [
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                    {
                        loader: 'webfonts-loader',
                        options: {
                            fileName: "../fonts/[fontname].[ext]"
                        }
                    }
                ]
            }
    ]
}};
module.exports = config;

and fonticon.font.js:

var path = require('path');
module.exports = {
    css: true,
    cssTemplate: path.resolve('node_modules/webfonts-generator/templates/scss.hbs'),
    files: [
        "./ifi/*.svg"
    ],
    // "dest": "../fonts",
    fontName: "ificons",
    cssFontsUrl: "/assets/mail/fonts/",
    classPrefix: "ifi-",
    baseClass: "ifi",
    fixedWidth: true,
    types: ["ttf", "woff", "woff2"]
};

It generates required .ttf, woff and wooff2 files, but NO SASS.

Integration using laravel mix

Hi, I found this plugin very useful. Is there a way how to do it using laravel mix?

It would be great to have a step by step guide also on how to integrate this plugin.

Thanks in advance!

Extract text plugin

Hello,
Haw can i integrate Extract text plugin
I tried do something like this:
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader?-autoprefixer', 'postcss-loader', 'webfonts-loader'] })

but it no working

Any chance to support multicolored icons?

This plugin is very helpful for us in generating icon fonts from SVG for our project, and very hopeful we could still do. Would there be any chance you'll be extending the feature of this plugin to support multicolored icons? Thanks in advance! :)

Working demo?

Hi.

Are you able to provide a full working demo with config pleeeeease... I can't get this working no matter what i try

Thanks

Content Hash different for same font file

We are on the verge of deploying a new site with this great font gen loader and we exposed a bug that may be this loader's issue or something up with webfonts-generator. Showed up during our deploy process that runs our webpack build on several servers, with our assets behind an ELB managing load.

Same version of node, shrinkwrapped npm, same exact npm list, same branch, yet we get different hashes on the woff2/woff font files, while SVG generation is identical every time. If you're running just one server this isn't an issue, but with several it becomes a blocker as all the CSS files that point to that font now have a different hash as well.

Quick fix is to force a manual cache buster like so: "fileName": "[fontname].1.[ext]" and just update the number manually whenever the file gets updated. Anyway, just wanted to put this on the map in case anyone else is suffering from the same issue.

Webpack 2 config documentation

Please add documentation about how to setup this in Webpack 2 config file.

Passing custom options.dest emits file named "undefined"

Steps to reproduce

Pass options.dest to the loader:

...
{
  test: /\.font\.(js|json)$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      {loader: 'webfonts-loader', options: {dest: '/min/'}}
    ]
  })
},

Expected result

The generated URLs in CSS start with /min/, in full accordance to the code:

  var pub = (
    generatorConfiguration.dest || (opts.output && opts.output.publicPath) || '/'
  );

Actual result

The URLs actually start with /min/, but all generated fonts are saved to the file named undefined (literally):

There is clearly a bug in the logic, because if there is a custom dest, you call emitFile referring to non-existent data:

Why this is important

With default settings, the generated CSS looks like this:

...
url("/23aba34a4572f7baa0aa-icons.woff") format("woff"),

This is unusable, because the assets typically do NOT reside directly at the site root. They normally reside under /static/ or https://static.project.net/, and there must be a way to tell webfonts-loader to emit proper working URLs.

Ideally, webfonts-loader should pick webpackConfig.output.publicPath automatically, without any additional setup. I can see that there is code that attempts to do so, but it uses legacy webpack 1.x API, and does nothing in Webpack 2.x and 3.x (unless LoaderOptionsPlugin is used).

Array buffer allocation failed

RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\ttf2woff2\jssrc\ttf2woff2.js:1:23296)
    at Module._compile (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\ttf2woff2\jssrc\index.js:3:27)
    at Module._compile (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\ttf2woff2\src\index.js:6:20)
    at Module._compile (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\webfonts-generator\src\generateFonts.js:8:17)
    at Module._compile (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\webfonts-generator\src\index.js:6:21)
    at Module._compile (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (c:\Workspaces\KramerNetwork\Dashboard\WebApplication\Client\application\node_modules\webfonts-loader\index.js:2:25)

Any idea?

Set style-loader as fallback

Hi there,

when set up my webpack.config.js like its documented in the readme, i got errors - so, instead of:

use: [
      'style-loader',
      'css-loader',
      'webfonts-loader'
    ]

i did:

use: [
      'css-loader',
      'webfonts-loader'
    ],
fallback: "style-loader"

and it's working fine. ☺️

Getting Error: Invalid character entity

> webpack --config ./webpack.config.js --progress --profile --colors

 10% building modules 7/11 modules 4 active ...s/node_modules/express/lib/express.jsevents.js:182
      throw er; // Unhandled 'error' event
      ^

Error: Invalid character entity
Line: 12
Column: 52
Char: ;

Here's my webpack config. What am I doing wrong? This is webpack v3.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    app: path.join(__dirname, './index.js')
  },
  output: {
    publicPath: '/',
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ {
          loader: 'html-loader',
          options: {
            minimize: true,
            interpolate: true,
          }
        }],
      },
      {
        test: /\.font\.js/,
        loader: ExtractTextPlugin.extract({
          use: [
            'style-loader',
            'css-loader',
            'webfonts-loader'
          ]
        })
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Support for publicPath?

I would love to have support for publicPath option, the same you can find in url-loader for instance.

So when I build my assets i want my fonts to go in this folder /fonts/MyFont.tff and that works fine. But in my css I want it to point to another folder /assets/fonts/MyFont.tff.

So the publicPath would be prepended to the fileName variable.

Hot update does not generate a new file?

Can you add a configuration, I don't have to add a new detected new.svg files, webpack hot update won't be repackaged to generate new font

Can we add `font-display` property in generated @font-face

I was able to set cssTemplate path to new .hbs css template but i can't get the scss template to work. Any idea?

Thanks

templateOptions not working since 4.0.0

Hello ! Thx for this awesome simple loader. I just have a problem to rewrite default 'src' in templateOptions. It seems that templateOptions object in font config is ignored.

In 3.0.0 version, it worked.

font config

module.exports = {
  'files': [
    './svg/*.svg'
  ],
  'fontName': 'axa-icons',
  'classPrefix': 'axa-icons-',
  'baseSelector': '.axa-icons',
  'cssTemplate': './css.hbs',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fileName': 'fonts/[fontname].[hash].[ext]',
};

webpack config

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const ExtractWebFontCSS = new ExtractTextPlugin('css/axa-icons.css');
const ExtractWebFontLess = new ExtractTextPlugin('less/axa-icons.less');
const ExtractWebFontSass = new ExtractTextPlugin('sass/axa-icons.scss');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './entry.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.font\.js/,
        loader: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { url: false } },
            { loader: 'webfonts-loader', options: { 'publicPath': '../' } },
          ]
        })
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    ExtractWebFontCSS,
    ExtractWebFontLess,
    ExtractWebFontSass,
  ]
};

Cannot resolve fs in several packages

When running this i get the following errors... http://th3fallen.d.pr/Nh5v.jpg

with the following config

module.exports = {
  files: [
    'assets/icons/*.svg', // glob style
  ],
  fontName: 'wiw-icons',
  classPrefix: 'wiwi-',
  baseClass: 'wiwi',
  fixedWidth: true,
  types: ['eot', 'woff', 'ttf', 'svg'], // this is the default
};

am i just missing a step or something

SVG icon has different color, the generated iconfont only monochrome ?

I have a color.svg files

Iconfont after conversion

Could not find options can be set up

Error in webpack build with extract-text-webpack-plugin

Hey @jeerbl, I am trying to use webfonts-loader in my webpack build with extract-text-webpack-plugin but I am getting an error:

webpack.base.conf.js

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

/**
 * Helper function to resolve paths relative to app root.
 *
 * @param {string} dir
 * @returns {string}
 */
function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src')
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },
    plugins: [
        // https://github.com/lodash/lodash-webpack-plugin
        new LodashModuleReplacementPlugin({
            // Iteratee shorthands for _.property, _.matches, & _.matchesProperty.
            shorthands: false,
            // Support “clone” methods & cloning source objects.
            cloning: false,
            // Support “curry” methods.
            currying: false,
            // Caches for methods like _.cloneDeep, _.isEqual, & _.uniq.
            caching: false,
            // Support objects in “Collection” methods.
            collections: false,
            // Support objects like buffers, maps, sets, symbols, typed arrays, etc.
            exotics: false,
            // Guards for host objects, sparse arrays, & other edge cases.
            guards: false,
            // Metadata to reduce wrapping of bound, curried, & partially applied functions.
            // (requires currying)
            metadata: false,
            // Support deburring letters.
            deburring: false,
            // Support Unicode symbols.
            unicode: false,
            // Components to support chain sequences.
            chaining: false,
            // 	Support _.memoize & memoization.
            memoizing: false,
            // Support for coercing values to integers, numbers, & strings.
            coercions: true,
            // 	Support “flatten” methods & flattening rest arguments.
            flattening: true,
            // Deep property path support for methods like _.get, _.has, & _.set.
            paths: true,
            // Argument placeholder support for “bind”, “curry”, & “partial” methods.
            // (requires currying)
            placeholders: false
        })
    ]
};

webpack.prod.conf.js

'use strict';
const fs = require('fs');
const path = require('path');
const _ = require('lodash');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const WebpackStrip = require('strip-loader');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

const env = process.env.NODE_ENV === 'testing' ?
    require('../config/test.env') :
    config.build.env;

const appRoot = path.resolve(__dirname, '..');
const nodeModulesPath = path.join(appRoot, 'node_modules');

const webpackConfig = merge(baseWebpackConfig, {
    module: {
        rules: [
            ...utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,
                extract: true
            }),
            {
                test: /\.font\.js$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        'style-loader',
                        'css-loader',
                        'webfonts-loader'
                    ]})
            },
            { test: /\.js$/, loader: WebpackStrip.loader('debug') }
        ]
    },
    devtool: config.build.productionSourceMap ? '#source-map' : false,
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        // https://webpack.js.org/plugins/loader-options-plugin/
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false,
            options: { context: appRoot }
        }),
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new webpack.NormalModuleReplacementPlugin(/debug/, path.join(__dirname, 'noop.js')),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                toplevel: true,
                keep_fnames: false
            },
            sourceMap: true,
            compress: {
                properties: true,
                keep_fargs: false,
                pure_getters: true,
                collapse_vars: true,
                warnings: false,
                screw_ie8: true,
                sequences: true,
                dead_code: true,
                drop_debugger: true,
                comparisons: true,
                conditionals: true,
                evaluate: true,
                booleans: true,
                loops: true,
                unused: true,
                hoist_funs: true,
                if_return: true,
                join_vars: true,
                cascade: true,
                drop_console: true,
                pure_funcs: ['classCallCheck', '_classCallCheck', '_possibleConstructorReturn',
                    'Object.freeze', 'invariant', 'warning']
            },
            comments: false
        }),
        // extract css into its own file
        new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            disable: false,
            allChunks: true
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({
            cssProcessorOptions: { safe: true }
        }),
        // generate dist index.html with correct asset hash for caching.
        // you can customize output by editing /index.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: process.env.NODE_ENV === 'testing' ?
                'index.html' : config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency',
            // TODO: minify service-worker-prod.js
            serviceWorkerLoader: `<script>${
                fs.readFileSync(
                    path.join(__dirname, './service-worker-prod.js'),
                    'utf-8'
                )
            }</script>`
        }),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            // eslint-disable-next-line no-shadow, no-unused-vars
            minChunks(module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    (/\.js$/).test(module.resource) &&
                    _.startsWith(module.resource, nodeModulesPath)
                );
            }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
            {
                from: path.join(appRoot, 'static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }
        ]),
        // service worker caching
        new SWPrecacheWebpackPlugin({
            // TODO: Change this to appropriate cacheId
            cacheId: 'my-vue-app',
            filename: 'service-worker.js',
            staticFileGlobs: ['dist/**/*.{js,html,css}'],
            minify: true,
            stripPrefix: 'dist/'
        })
    ]
});

if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin');

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                `\\.(${
                    config.build.productionGzipExtensions.join('|')
                })$`
            ),
            threshold: 10240,
            minRatio: 0.8
        })
    );
}

if (config.build.bundleAnalyzerReport) {
    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

module.exports = webpackConfig;

package.json

{
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "lint": "eslint --ext .js,.vue src build config test/unit/specs test/e2e/specs",
    "lint:fix": "npm run lint -- --fix",
    "precommit": "lint-staged",
    "cz": "git-cz",
    "cz:retry": "git-cz --retry",
    "commitmsg": "validate-commit-msg",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "date-fns": "^1.28.5",
    "debug": "^2.6.8",
    "es6-promise": "^4.1.1",
    "lodash": "^4.17.4",
    "qs": "^6.5.0",
    "vue": "^2.3.3",
    "vue-awesome-swiper": "^2.6.2",
    "vue-router": "^2.3.1",
    "vue2-google-maps": "^0.8.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "commitizen": "^2.9.6",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "cz-conventional-changelog": "^2.0.0",
    "dedent": "^0.7.0",
    "eslint": "^4.2.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-lodash": "^2.4.3",
    "eslint-plugin-promise": "^3.5.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.3",
    "husky": "^0.14.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.31",
    "karma-webpack": "^2.0.4",
    "lint-staged": "^4.0.1",
    "lodash-webpack-plugin": "^0.11.4",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "strip-loader": "^0.1.2",
    "style-loader": "^0.18.2",
    "sw-precache-webpack-plugin": "^0.11.4",
    "url-loader": "^0.5.8",
    "validate-commit-msg": "^2.12.2",
    "vue-loader": "^12.2.1",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webfonts-loader": "^1.2.0",
    "webpack": "^3.5.6",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

build.js

'use strict';
require('./check-versions')();

process.env.NODE_ENV = 'production';

const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const dedent = require('dedent');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');

const spinner = ora('building for production...');
spinner.start();

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err;
    webpack(webpackConfig, (webpackErr, stats) => {
        spinner.stop();
        if (webpackErr) throw webpackErr;
        process.stdout.write(`${stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        })}\n\n`);

        console.log(chalk.cyan('Build complete.\n'));
        console.log(chalk.yellow(dedent`
          Tip: built files are meant to be served over an HTTP server.
          Opening index.html over file:// won't work.
        `
        ));
    });
});

Stack trace

ERROR in ./src/core/icons.font.js
Module build failed: TypeError: text.forEach is not a function
    at my_prj_path\node_modules\extract-text-webpack-plugin\dist\loader.js:131:14
    at compile (my_prj_path\node_modules\webpack\lib\Compiler.js:304:11)
    at applyPluginsAsync.err (my_prj_path\node_modules\webpack\lib\Compiler.js:520:14)
    at next (my_prj_path\node_modules\tapable\lib\Tapable.js:202:11)
    at Compiler.<anonymous> (my_prj_path\node_modules\extract-text-webpack-plugin\dist\loader.js:108:7)
    at next (my_prj_path\node_modules\tapable\lib\Tapable.js:204:14)
    at Compiler.<anonymous> (my_prj_path\node_modules\webpack\lib\CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:206:13)
    at compilation.seal.err (my_prj_path\node_modules\webpack\lib\Compiler.js:517:11)
    at Compilation.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:195:46)
    at self.applyPluginsAsync.err (my_prj_path\node_modules\webpack\lib\Compilation.js:671:19)
    at Compilation.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:195:46)
    at self.applyPluginsAsync.err (my_prj_path\node_modules\webpack\lib\Compilation.js:662:11)
    at next (my_prj_path\node_modules\tapable\lib\Tapable.js:202:11)
    at Compilation.<anonymous> (my_prj_path\node_modules\uglifyjs-webpack-plugin\dist\index.js:244:6)
    at Compilation.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:206:13)
    at self.applyPluginsAsync.err (my_prj_path\node_modules\webpack\lib\Compilation.js:657:10)
    at Compilation.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:195:46)
    at sealPart2 (my_prj_path\node_modules\webpack\lib\Compilation.js:653:9)
    at Compilation.applyPluginsAsyncSeries (my_prj_path\node_modules\tapable\lib\Tapable.js:195:46)
    at Compilation.seal (my_prj_path\node_modules\webpack\lib\Compilation.js:596:8)
    at applyPluginsParallel.err (my_prj_path\node_modules\webpack\lib\Compiler.js:514:17)
 @ ./src/main.js 3:0-30

The project was created using this template - https://github.com/vuejs-templates/webpack. Apologies for the extremely verbose issue.

publicPath failing in Webpack 2

Getting this when I try to build:

Module build failed: TypeError: Cannot read property 'publicPath' of undefined at Object.module.exports (/app/node_modules/webfonts-loader/index.js:146:16)

So I patched the code directly with better object checking:

(opts.output && opts.output.publicPath) ? opts.output.publicPath : '/'

Then it magically seemed to work. Question is, is this just a bandaid for a problem in my setup?

Webpack 4 Migration

    ERROR in ./node_modules/string-replace-webpack-plugin/loader.js?id=12twekiwixhc!./node_modules/css-loader!./node_modules/webfonts-loader?fileName=./fonts/[fontname].[ext]!./src/icons/listcorp.font.js
    Module build failed: TypeError: Cannot read property 'context' of undefined
        at webfontsGenerator (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/webfonts-loader/index.js:172:35)
        at /Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/webfonts-generator/src/index.js:105:4
        at _fulfilled (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:854:54)
        at self.promiseDispatch.done (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:883:30)
        at Promise.promise.promiseDispatch (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:816:13)
        at /Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:624:44
        at runSingle (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:137:13)
        at flush (/Users/darylteo/workspaces/listcorp/dev/lca/frontend/node_modules/q/q.js:125:13)
        at process._tickCallback (internal/process/next_tick.js:150:11)

https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

this.options and this.rootContext
webpack 3 already deprecated this.options in the loader context. webpack 4 removes it now.

A lot of people are missing the this.options.context value now. It has been added as this.rootContext.

Guideline: Loaders should receive all options via this.query. They should not use other ways to receive options, i. e. no property in webpack options, no environment variable.

Example fix? Not sure. I'm not too familiar with Webpack loaders.

Thanks!

The files aren't being generated.

I'm very frustrated with this. I've been on this for hours and I'm about to give up.

Webpack:

  entry: './src/entry.js',
  output: {
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ {
          loader: 'html-loader',
          options: {
            minimize: true,
            interpolate: true,
          }
        } ],
      },
      {
        test: /\.(css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.font\.js/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'webfonts-loader',
            options: {
                fileName: '../dist/[fontname].[ext]'
            }
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    })
  ],
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  target: 'node'
};

and here's my config:

module.exports = {
  'files': [
    'assets/icons/svgs/*.svg'
  ],
  'fontName': 'fonticons',
  'classPrefix': 'oi-icon-',
  'baseSelector': '.fonticon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fixedWidth': true,
  'embed': true,
  'fileName': '[fontname].[ext]',
  'css': true,
  'cssDest': 'dist',
};

Why am I not seeing the icon files in dist folder?

Depreaction warning. loaderUtils.parseQuery() received a non-string value which can be problematic

Hi!

I've migrated the projects to the webpack 2 and I've received this warning.

(node:6378) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/lo
ader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

I've tried to fix It but without any result.

// Futureproof webpack option parsing
function wpGetOptions(context) {
  if (typeof context.query === 'string') return loaderUtils.parseQuery(context.query);
  return loaderUtils.getOptions(context);
}

Duplicated fonts and config font file being parsed

I've notice that when I run my build, it's generating more than one font file:

Here is my webpack config:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    app: [
  		'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ],
    vendors: [
      'jquery',
      'script-loader!./src/vendors/olosws.js',
      'script-loader!./src/vendors/olos_cti.js'
    ],
    iconfont: [
      './src/eaglleicons.font.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  devServer: {
  	compress: true,
  	contentBase: path.resolve(__dirname, "dist"),
  	hot: true,
    historyApiFallback: true,
  	publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          "babel-loader",
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]__[hash:base64:5]',
              url: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer'),
                ];
              }
            }
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
              importLoaders: 2,
              localIdentName: '[name]__[local]__[hash:base64:5]',
              url: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          {
            loader: "sass-loader"
          }
        ],
      },
      {
        test: /\.font\.js/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'webfonts-loader'
          ]
        })
      }
    ],
  },
  plugins: [
  	new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new ExtractTextPlugin({
      filename:'[name].css', 
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  }
};

My font config file:

module.exports = {
  'files': [
    './icons/*.svg'
  ],
  'fontName': 'eaglleicons',
  'classPrefix': 'icon-',
  'baseSelector': '.icon',
  'types': ['woff2', 'ttf'],
  'fileName': '[fontname].[hash].[ext]'
};

I was looking into the docs and I cannot find anything related to this.

Also, I can't figure out why my font config is being parsed and copied to my dist folder.

Can't find CSS or SCSS generated

Here is my myapp.font.js file :

module.exports = {
    'files': [
        './icons/*.svg'
    ],
    'fontName': 'myapp-icons',
    'classPrefix': 'mu-',
    'baseSelector': '.mu-icon',
    'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
    'fileName': 'myapp-icons.[ext]'
};

I added this in my webpack loaders :

{
                test: /\.font\.js/,
                loaders:  [
                    'style-loader',
                    'css-loader',
                    'webfonts-loader'
                ]
            },

I can find the generated font files in the build folder but nothing about the classes mu-icon or mu- in the style.css generated

Proposed new option: emitCodepoints

Sent a PR with the proposal of a new option: emitCodepoints, as described at the Pull Request #56

how can i use cssFontsPath?

Hi,
now i'm trying many hours to use cssFontsPath to modify the fonts path inside of the generated template and i don't get it work.
Otherwise, is there any way to fetch the file-hash of the font-file inside of the template to getting it work manually?

something like:

    @font-face {
        font-family: "{{fontName}}";
        src: url('../fonts/{{fontName}}.eot?{{hash}}');
        src: url('../fonts/{{fontName}}.eot#iefix?{{hash}}') format('eot'),
        url('../fonts/{{fontName}}.woff2?{{hash}}') format('woff2'),
        url('../fonts/{{fontName}}.woff?{{hash}}') format('woff'),
        url('../fonts/{{fontName}}.ttf?{{hash}}') format('truetype'),
        url('../fonts/{{fontName}}.svg#{{fontName}}?{{hash}}') format('svg');
    }

or can i attach an anonymous callback function to the src attribute, to generate my own?

I would be happy for some hints of you. Thank you in advance! :)

How to use this with SASS?

Thanks for this great module and for releasing it for WebPack2 👍

I'm having some troubles using it in production, because we have a special webpack entry for (styles.scss) that compiles everything into one .css file. Imports are done via @import 'another (s)css file';

We woule like to let the css file should hold all our styles, therefore I would like to include the font in that too. But of course require ('../icons/app.font') is not working inside an (s)css file that gets loaded via the sass-loader first. Is it possible to circumvent this?

Rewrite README

Rewrite README entirely.

Usage with nuxt

Any idea how to use this with nuxt.js?

Generating HTML preview

Hi,

webfont-generator lists this feature

Generates CSS files and HTML preview, allows to use custom templates.

Any chance we could generate html preview in this plugin?

'embed' option does not base64 encode fonts when set to 'true'

RE: 'embed' option does not base64 encode fonts when set to 'true'

It appears the 'embed' var is set value from a non existing object 'params' so both that the the key is undefined

I've fixed the issue and have created a PR - can we merge and push the update to NPM? :)

https://github.com/jeerbl/webfonts-loader/pull/32

Thanks

Tom

How to custom font-face src path ?

My directory structure:

myapp/
   app/
      assets/
         javascripts/
          octicons.font.js
          ...
        stylesheets/
  static/
    javascripts/
    stylesheets/
    fonts/
  node_modules/

octicons.font.js file content:

module.exports = {
  files: [
    '../../../node_modules/octicons/build/svg/*.svg'
  ],
  fontName: 'octicons',
  classPrefix: 'octicon-',
  baseSelector: '.octicon',
  types: ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  fileName: '../fonts/[fontname].[ext]'
};

This configuration can successfully output font files and css, But the output css is not what I want:

@font-face {
  font-family: "octicons";
  src: url("/fonts/octicons.eot?#iefix") format("embedded-opentype"),
  url("/fonts/octicons.woff") format("woff"),
  url("/fonts/octicons.woff2") format("woff2"),
  url("/fonts/octicons.ttf") format("truetype"),
  url("/fonts/octicons.svg#octicons") format("svg");
}

I want src path in the /static/fonts/ directory, How to configure it?

I have tried this:

module.exports = {
  files: [
    '../../../node_modules/octicons/build/svg/*.svg'
  ],
  dest: '../../../static/fonts',
  fontName: 'octicons',
  classPrefix: 'octicon-',
  baseSelector: '.octicon',
  types: ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  fileName: '[fontname].[ext]'
};

But there are some errors, why is it going to parse the font file?

ERROR in F:/repos/myapp/static/fonts/octicons.eot
    Module parse failed: F:\repos\myapp\static\fonts\octicons.eot Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ F:/repos/myapp/node_modules/[email protected]@css-loader!F:/repos/myapp/node_modules/[email protected]@webfonts-loader!./octicons.font.js 6:85-130

Please update README

Please update README with more examples of usage.
Build always break with:
`ERROR in ./~~/css-loader!./~~/webfonts-loader!./app/fontconfig.json
Module build failed:
@ ./~~/style-loader!./~~/css-loader!./~/webfonts-loader!./app/fontconfig.json 4:14-121
@ ./app/fontconfig.json
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app

ERROR in ./app/fontconfig.json
Module build failed: ModuleBuildError: Module build failed:
at runLoaders (C:\Users\Alba\Desktop\projs\mashenka\node_modules\webpack\lib\NormalModule.js:192:19)
at C:\Users\Alba\Desktop\projs\mashenka\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\Alba\Desktop\projs\mashenka\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\Alba\Desktop\projs\mashenka\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at webfontsGenerator (C:\Users\Alba\Desktop\projs\mashenka\node_modules\webfonts-loader\index.js:166:14)
at C:\Users\Alba\Desktop\projs\mashenka\node_modules\webfonts-generator\src\index.js:107:26
at _rejected (C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:864:24)
at C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:890:30
at Promise.when (C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:1142:31)
at Promise.promise.promiseDispatch (C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:808:41)
at C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:624:44
at runSingle (C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:137:13)
at flush (C:\Users\Alba\Desktop\projs\mashenka\node_modules\q\q.js:125:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
Child extract-text-webpack-plugin:

ERROR in ./~/css-loader!./~/webfonts-loader!./app/fontconfig.json
Module build failed:
 @ ./~/style-loader!./~/css-loader!./~/webfonts-loader!./app/fontconfig.json 4:14-121

webpack: Failed to compile.`

For config used json:
{ "files": [ "./img/icons/search.svg" ], "fontName": "Awesomecons", "classPrefix": "ai-", "baseSelector": ".ai", "fixedWidth": true, "types": ["eot", "woff", "ttf", "svg"] }

Opening all webfonts-generator options

Dependencies:

Laravel Mix: ^1.0
Webpack: ^3.5.0

Is there a way to pass through this plugin the options that I would normally pass to webfonts-generator?

I can't reach to all their options like telling to generate the CSS file. My font file is always prepended to my main CSS file and by now I need that file in a separate folder.

Another situation is that my fileName option in the myfont.js file must be like public/folder/font.[ext], otherwise it puts the generated files into the root folder of my webpack config.

I also believe that opening all the options would make this loader more flexible.

How to generate scss file?

I want to generate scss file with variables and shit, to use them inside my own scss, after svg built
I made 2 different configurations for webpack, first to compile svg to scss, second to compile project
Use case is to use generated with first task scss (which will contain variables with unicodes) and some styles, inside my own scss files

baseSelector not working

Hi there!

My baseSelector is showing up as a blank space in the source. The only way I can get it to work is by hardcoding my selector in the .hbs file :(

Here's how I have the code:
'baseSelector': '.icon-font',

Move this package to webpack-contrib

Hi @d3viant0ne!

Is it possible to move this to webpack-contrib?

Thanks,
Jerome

Default publicPath value, relative publicPath

Hi,
thanks for writing this loader. It integrates nicely in our Webpack configuration.
However I've noticed a small issue connected with the default value of the publicPath.

According to the Webpack docs the default value for publicPath is an empty string, which means relative to the page. This is the case in my app and in the production build I omit defining the publicPath. When using this loader in the urls for the font I have absolute url (starting with /). I suppose the issue is on this line.

Note: If the path is relative in the urls for the fonts, through the css-loader, Webpack will require the file and fail because the file does not exists. Any ideas on how we can fix this?

Output CSS not respecting the output path

It seems the issue in #1 is affecting the output publicPath in the CSS:

@font-face{ font-family:"icons"; src:url(/e6b2c7284ec73c1b3092436005eddf81-icons.woff) format("woff") }

It should point to /build/[...].woff like everything else in Webpack. Should we get to the root of the problem in issue #1? Thanks for all your help

How can this be configured for SASS and webpack2?

I've got a webpack2 config like

      // Add support for icon fonts.
      {
        test: /\.font\.js/,
        exclude: ['node_modules', 'bower_components'],
        loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader?importLoaders=1',
          'webfonts-loader'
        ]
      })
      }

and configured the generate to use the scss template. However, that way the sass mixins end up in my applications css file. How is that configured, such that I can use the generated mixin in my sass?

Breaks webpack 2's css-loader when publicPath is an http:// url

To reproduce the bug clone https://github.com/crystalline/webfonts-loader/tree/reproduce-loader-bug

cd test 
yarn
node run.js

This produces such errors:

ERROR in ./~/css-loader!./~/webfonts-loader!./octicons.font.js
Module not found: Error: Can't resolve './http:/localhost:8080/9a0b787f9c5f5bf121d882c684e70901-Octicons.eot' in '/home/user/soft/webfonts-loader/test'
 @ ./~/css-loader!./~/webfonts-loader!./octicons.font.js 6:85-164
 @ ./octicons.font.js
 @ ./entry.js

Segmentation faul

‘Segmentation faul’t occurs when webpack is packaged

error info
npm/webpack: line 14: 4696 Segmentation fault node "$basedir/node_modules/webpack/bin/webpack.js" "$@"

How would one generate SASS instead of CSS?

As noted in #18 it's unclear to me how this is supposed to be used with sass. The configuration in #17 does not help me - I got it working with webpack2 in general, but I do not know how to integrate it into my sass workflow. By default it did generate CSS, but that way the icon font cannot be used in the sass files. So I tried changing the template to the scss template as that seems to generate useful scss mixins. Can they be used somehow? Or is there some other way to use this with sass mixins?

Sth doesn`t work for me

Hi,
I want to generate my font so...

My config file (./config/icon.font.js):

module.exports = {
    files: [
        './../assets/svg/icons/*.svg'
    ],
    fontName: 'iconfont',
    classPrefix: 'icon-',
    baseSelector: '.icon',
    types: ['eot', 'woff', 'woff2', 'ttf'],
    fileName: 'app.[fontname].[ext]',
    dest: './../public/fonts/',
};

after yarn run webpack my font files have been created but I see errors in the console :

ERROR in ./config/icon.font.js
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../public/fonts/app.iconfont.eot' in '/Users/michalmalinowski/development/wordpress/kdn/content/themes/knd/config'
[...]

ERROR in ./node_modules/css-loader!./node_modules/webfonts-loader!./config/icon.font.js
Module not found: Error: Can't resolve '../public/fonts/app.iconfont.eot' in '/Users/michalmalinowski/development/wordpress/kdn/content/themes/knd/config'
 @ ./node_modules/css-loader!./node_modules/webfonts-loader!./config/icon.font.js 6:85-128
 @ ./config/icon.font.js
 @ ./assets/js/app.js

( same error for the rest of font files )

Did I miss something ?

jeerbl / webfonts-loader Goto Github PK

webfonts-loader's People

Contributors

Stargazers

Watchers

Forkers

webfonts-loader's Issues

Steps to reproduce

Expected result

Actual result

Why this is important

Recommend Projects

Recommend Topics

Recommend Org