❤
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

Dependencies (6)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i webpack-icons-installer

    Weekly Downloads

    49

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    235 kB

    Total Files

    12

    Last publish

    Collaborators

    • devrafalko
    Try on RunKit
    Report malware