Webpack loader to use icon font, easiest solution!
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
README.md
create-tmp-dir.js
index.js
package.json

README.md

Build Status

Icon maker loader

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

Installation

  • 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.

Usage

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 (
      <div>
        Look at my icon!
        <span className={yinYan} />
      </div>
    );
  }
}

html example (requires html-loader)

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

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

icon-maker?fontFamily=login&files=eot,svg&localCss