# webpack-iconfont-plugin-nodejs

**Repository Path**: jishichang/webpack-iconfont-plugin-nodejs

## Basic Information

- **Project Name**: webpack-iconfont-plugin-nodejs
- **Description**: Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html preview file.
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-27
- **Last Updated**: 2021-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-iconfont-plugin-nodejs

Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html-preview file.

## Features:

* Iconfont output formats: WOFF2, WOFF, EOT, TTF and SVG.
* Generates CSS file, js data file, html-preview file.
* Supports webpack and hot reloading at devlopment time. Iconfont files and css file will be rebuilt while any svg file changed or added, then page will refresh.
* Supports running by nodejs directly.
* Fixed output files with the same svg files. It means that if the svg files are not changed, all the output files(ttf,woff,css...) will not change, even though you build them again.
* High iconfont precision.

## Test for preview:
````bash
git clone https://github.com/hzsrc/webpack-iconfont-plugin-nodejs.git
cd webpack-iconfont-plugin-nodejs
npm install
npm run dev
````
Or visit this preview: http://test.hz300.com/webpack4/iconfontPreview.html


## Install:
`npm install webpack-iconfont-plugin-nodejs`


## Usage:
You can use it by nodejs directly or use it in webpack
#### 1. Use by nodejs directly:   

`build/svg2font.js:`

```js
var WebpackIconfontPluginNodejs = require('webpack-iconfont-plugin-nodejs');
var path = require('path');
var dir = 'test/web_project/'
var options = {
    fontName: 'my-app-icon',
    // template: path.join(dir, 'src/fonts/css.njk'),
    svgs: path.join(dir, 'src/svgs/*.svg'),
    fontsOutput: path.join(dir, 'src/fonts/'),
    cssOutput: path.join(dir, 'src/fonts/font.css'),
    jsOutput: path.join(dir, 'src/fonts/fonts.js'),
    htmlOutput: path.join(dir, 'src/fonts/font-preview.html'),
    //formats: ['ttf', 'woff2', 'woff', 'svg'],
    cssPrefix: 'my-icon'
};

new WebpackIconfontPluginNodejs(options).build()
```

Then you can run this command to build iconfont by svg:
```bash
node build/svg2font.js
```
Or you can set this command to script of package.json, and run it by npm.

#### 2. Use by webpack: 
```js
var WebpackIconfontPluginNodejs = require('../../../src/index.js');

module.exports = {
    //... others
    plugins: [
        new WebpackIconfontPluginNodejs({
            fontName: 'my-app-icon',
            // template: path.join(dir, 'src/fonts/css.njk'),
            svgs: path.join(dir, 'src/svgs/*.svg'),
            fontsOutput: path.join(dir, 'src/fonts/'),
            cssOutput: path.join(dir, 'src/fonts/font.css'),
            jsOutput: path.join(dir, 'src/fonts/fonts.js'),
            htmlOutput: path.join(dir, 'src/fonts/font-preview.html'),
            //formats: ['ttf', 'woff2', 'woff', 'svg'],
            cssPrefix: 'my-icon'
        }),
    ]
};

```

## Options

#### `svgs` (required)
Type: `String`    
File path(s) or glob(s) to svg icons. Recommend to use *.svg like this: /src/project/src/*.svg, this can watch svgs by directory.


#### `fontsOutput` (required)
Type: `String`    
Destination for generated font files (directory).


#### `cssOutput` (required)
Type: `String`    
Destination for generated css file (file name).

#### `fontName`
Type: `String`    
Default value: `iconfont`    
The font family name (e.g. `font-family: 'iconfont'`).


### `htmlOutput`
Type: `String`     
Default value: [path of cssOutput] + `/font-preview.html`. Or `false` value.    
Destination for generated html-preview file (file name). If `false`, no html and js output.

#### `template`
Type: `String`    
Default value: `css`    
Type of built in style templates ('css', 'scss', 'scss-mixins') or path to custom template.

#### `formats`
Type: `Array of String`     
Default value: `['svg', 'ttf', 'eot', 'woff2', 'woff']`    
The output iconfont formats.

#### `cssPrefix`
Type: `String`    
Default value: fontName    
Css className prefix.

#### Other options for advanced
Please refer to:    
https://www.npmjs.com/package/svgicons2svgfont    
https://www.npmjs.com/package/svg2ttf    
https://www.npmjs.com/package/ttf2eot    
https://www.npmjs.com/package/ttf2woff    
https://www.npmjs.com/package/ttf2woff2