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 = ; moduleexports = ... module: loaders: test: /\.svg$/ loader: 'icon-maker' include: path // To avoid clash of svgs test: /\.css$/ // Have to configure css loader for the generated css loader: 'css' test: /\.$/ // Have to configure fonts loaders for the generated fonts loader: 'url' exclude: path // To avoid clash of svgs ;
js example (react)
;; // You get classes `default default-yin-yan` extends Component { return <div> Look at my icon! <span className=yinYan /> </div> ; }
html-loader)
html example (requires Look at my icon!
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