https://github.com/unimonkiez/icon-maker-loader
Webpack loader to use icon font, easiest solution!
https://github.com/unimonkiez/icon-maker-loader
es6 font-files html icons loader webpack
Last synced: about 2 months ago
JSON representation
Webpack loader to use icon font, easiest solution!
- Host: GitHub
- URL: https://github.com/unimonkiez/icon-maker-loader
- Owner: unimonkiez
- Created: 2016-09-16T18:55:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-23T15:59:41.000Z (about 8 years ago)
- Last Synced: 2025-03-18T20:39:54.048Z (2 months ago)
- Topics: es6, font-files, html, icons, loader, webpack
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 17
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/unimonkiez/icon-maker-loader)
# 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
```javascript
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)
```javascript
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!
);
}
}
```
### html example (requires [html-loader](https://github.com/webpack/html-loader))
```html
Look at my icon!
```
## 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](https://github.com/webpack/css-loader#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`