❤
npm
Sign UpSign In

webpack-icons-installer

2.0.0 • Public • Published

Installation

This one package will let you use all the icons provided by:

  • Bootstrap Glyphicons (260 free glyphs from the Glyphicon Halflings set)
  • Google material-design-icons
  • font-awesome icons

Use npm install webpack-icons-installer instead of installing all dependencies and loaders separately.

Since icons packages consists of more than 90.000 files, takes up more than 100MB and takes some time while installation, it is recommended to install it globally:

npm install webpack-icons-installer -g

npm link webpack-icons-installer

Configuration

your webpack.config.js file
  • add url-loader to emit all icons files
  • add style-loader and css-loader to handle css files that implement icons
const path = require('path');
 
module.exports = {
  entry: {
    index:'./src/index.js'
  },
  output: {
    filename: 'bundled.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath:'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ["style-loader","css-loader"]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name:'[name].[ext]',
          outputPath:'assets' //the icons will be stored in dist/assets folder
        }
      }
    ]
  }
};
your entry index.js file
require('webpack-icons-installer');   //load ALL icons
 
//OR:
 
require('webpack-icons-installer/font-awesome'); //load only font-awesome icons
require('webpack-icons-installer/google');  //load only google material-design-icons
require('webpack-icons-installer/bootstrap');  //load only bootstrap glyphicons

To use icons in your HTML use the common font-awesome, material-design-icons and bootstrap classes:

<html>
  <head>...</head>
  <body>
    <!-- Bootstrap glyphicons classes -->
    <i class="glyphicon glyphicon-cloud"></i>
    <i class="glyphicon glyphicon-remove"></i>
    <i class="glyphicon glyphicon-user"></i>
    <i class="glyphicon glyphicon-envelope"></i>
    <i class="glyphicon glyphicon-thumbs-up"></i>		
    
    <!-- font-awesome classes -->	
    <i class="fa fa-spinner fa-spin"></i>
    <i class="fa fa-circle-o-notch fa-spin"></i>
    <i class="fa fa-refresh fa-spin"></i>
    <i class="fa fa-cog fa-spin"></i>
    <i class="fa fa-spinner fa-pulse"></i>
    <i class="fa fa-car fa-4x fa-stack-2x"></i>		
    
    <!-- material-design-icons class and contents -->	
    <i class="material-icons">cloud</i>
    <i class="material-icons">favorite</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons">computer</i>
    <i class="material-icons">traffic</i>
  </body>
</html>

Links

See also

Readme

Keywords

Package Sidebar

Install

npm i webpack-icons-installer

Weekly Downloads

50

Version

2.0.0

License

MIT

Unpacked Size

235 kB

Total Files

12

Last publish

Collaborators

  • devrafalko
Try on RunKit
Report malware