icon-maker-loader
v0.1.12 icon maker loader webpack font svg css family
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
andurl-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: 'css'
}, {
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
- (defaulticon-maker
), can split your icons to multiple font families (for instance, better loading for different pages of your application).files
- (defaulteot,svg,ttf,woff
), can decide which font files will be generated.localCss
- (defaultfalse
) - will generate css with local scope to be used with css-loader (you can also convert all of your classes to local usingcss-loader?modules
and then this option is not needed).
Example of parameters
icon-maker?fontFamily=login&files=eot,svg&localCss