Webpack loader to use icon font, easiest solution!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Build Status

Icon maker loader

Webpack loader to load svgs to font files and return the css classes to use that icon.


  • npm install icon-maker-loader
  • if you dont have a css and fonts (eot,svg,ttf,woff) loader, you can use css-loader and url-loader.


webpack configuration

const path = require('path');

module.exports = {
  module: {
    loaders: [
        test: /\.svg$/,
        loader: 'icon-maker',
        include: path.join(__dirname, 'icons') // To avoid clash of svgs
      }, {
        test: /\.css$/, // Have to configure css loader for the generated css
        loader: 'style!css' // you can use `extract-text-webpack-plugin` instead of style-loader if it fits your needs
      }, {
        test: /\.(woff|eot|ttf|svg)$/, // Have to configure fonts loaders for the generated fonts
        loader: 'url',
        exclude: path.join(__dirname, 'icons') // To avoid clash of svgs

js example (react)

import React, { Component } from 'react';
import yinYan from './icons/yin-yan.svg'; // You get classes `default default-yin-yan`

export default MyComponent extends Component {
  render() {
    return (
        Look at my icon!
        <span className={yinYan} />

html example (requires html-loader)

  Look at my icon!
  <span class="${require('./icons/yin-yan.svg')}">

parameters (query params to the loader)

  • fontFamily - (default icon-maker), can split your icons to multiple font families (for instance, better loading for different pages of your application).
  • files - (default eot,svg,ttf,woff), can decide which font files will be generated.
  • localCss - (default false) - will generate css with local scope to be used with css-loader (you can also convert all of your classes to local using css-loader?modules and then this option is not needed).

Example of parameters