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
webpack.config.js
file
your - add
url-loader
to emit all icons files - add
style-loader
andcss-loader
to handle css files that implement icons
const path = ; moduleexports = entry: index:'./src/index.js' output: filename: 'bundled.js' path: path publicPath:'dist/' module: rules: test: /\.css$/ loaders: "style-loader""css-loader" test: /\.?$/ loader: 'url-loader' options: limit: 8192 name:'[name].[ext]' outputPath:'assets' //the icons will be stored in dist/assets folder ;
index.js
file
your entry ; //load ALL icons //OR: ; //load only font-awesome icons; //load only google material-design-icons; //load only bootstrap glyphicons
To use icons in your HTML use the common font-awesome
, material-design-icons
and bootstrap
classes:
... <!-- Bootstrap glyphicons classes --> <!-- font-awesome classes --> <!-- material-design-icons class and contents --> cloud favorite attachment computer traffic