Installations

npm install webpack-iconfont-plugin-nodejs

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.20.2

NPM Version

8.19.4 Score

71.3

Supply Chain

97.7

Quality

75.3

Maintenance

100

Vulnerability

97.9

License

Pull Requests

Open

3

Total

35

Closed

8

Merged

24

Issues

Open

0

Total

20

Closed

20

Releases

Unable to fetch releases

Contributors

2

Unable to fetch Contributors

View all 2 contributors

Languages

4

JavaScript

Nunjucks

HTML

CSS

JavaScript (63.09%)

Nunjucks (23.6%)

HTML (10.07%)

CSS (3.25%)

Developer

hzsrc

Download Statistics

Total Downloads

222,953

Last Day

288

Last Week

1,602

Last Month

7,865

Last Year

59,323

GitHub Statistics

85 Stars

112 Commits

13 Forks

3 Watching

5 Branches

2 Contributors

Bundle Size

464.84 kB

Minified

147.73 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

1.0.36

Package Id

webpack-iconfont-plugin-nodejs@1.0.36

Unpacked Size

35.50 kB

Size

10.36 kB

File Count

17

NPM Version

8.19.4

Node Version

16.20.2

Publised On

11 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

222,953

Last day

-22.6%

288

Compared to previous day

Last week

-22.3%

1,602

Compared to previous week

Last month

34.9%

7,865

Compared to previous month

Last year

-0.1%

59,323

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

10

async-throttle globby nodeify nunjucks svg2ttf svgicons2svgfont thro-debs ttf2eot ttf2woff ttf2woff2-no-gyp

Dev Dependencies

13

copy-webpack-plugin css-loader eventsource-polyfill express file-loader html-webpack-plugin opn style-loader url-loader webpack webpack-dev-middleware webpack-dev-server webpack-hot-middleware

Versions

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:

1git clone https://github.com/hzsrc/webpack-iconfont-plugin-nodejs.git
2cd webpack-iconfont-plugin-nodejs
3npm install
4npm 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:

1var WebpackIconfontPluginNodejs = require('webpack-iconfont-plugin-nodejs');
2var path = require('path');
3var dir = 'test/web_project/'
4var options = {
5  fontName: 'my-icons',
6  cssPrefix: 'ico',
7  svgs: path.join(dir, 'svgs/*.svg'),
8  // template: path.join(dir, 'css.njk'),
9  // htmlTemplate: path.join(dir, 'html.njk'),
10  fontsOutput: path.join(dir, 'fonts/'),
11  cssOutput: path.join(dir, 'fonts/font.css'),
12  htmlOutput: path.join(dir, 'fonts/_font-preview.html'),
13  jsOutput: path.join(dir, 'fonts/fonts.js'),
14  // formats: ['ttf', 'woff', 'svg'],
15};
16
17new WebpackIconfontPluginNodejs(options).build()

Then you can run this command to build iconfont by svg:

1node build/svg2font.js

Or you can set this command to script of package.json, and run it by npm.

2. Use by webpack:

1var WebpackIconfontPluginNodejs = require('webpack-iconfont-plugin-nodejs');
2var dir = 'test/web_project/'
3
4module.exports = {
5    //... others
6    plugins: [
7        new WebpackIconfontPluginNodejs({
8          fontName: 'my-icons',
9          cssPrefix: 'ico',
10          svgs: path.join(dir, 'svgs/*.svg'),
11          // template: path.join(dir, 'css.njk'),
12          fontsOutput: path.join(dir, 'fonts/'),
13          cssOutput: path.join(dir, 'fonts/font.css'),
14          htmlOutput: path.join(dir, 'fonts/_font-preview.html'),
15          jsOutput: path.join(dir, 'fonts/fonts.js'),
16          namesOutput: path.join(dir, 'fonts/names.txt'),
17          // formats: ['ttf', 'woff', 'svg'],
18        }),
19    ]
20};
21

Options

`svgs` (required)

Type: String | [String] | [{ fileName:String, svgContent:String }, ...]
File path(s) or glob(s) to svg icons. Recommend to use *.svg like this: svgs: '/src/project/src/*.svg', this can watch svgs by a directory.

Or array of svg-data with fileName(must be *.svg) and svgContent like this:

1svgs: [
2    {
3        fileName: 'my-svg1.svg',
4        svgContent: '<svg xmlns="http://www.w3.org/2000/svg">......</svg>'
5    },{
6        fileName: 'mySvg2.svg',
7        svgContent: '<svg xmlns="http://www.w3.org/2000/svg">......></svg>'
8    }
9]

`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 full path to custom template.

`htmlTemplate`

Type: String
Default value: templates/html.njk Full path to custom html 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.

`jsOutput`

Type: String
Default value: undefined.
Path of a js file which contains all svg contents. Optional.

`namesOutput`

Type: String
Default value: undefined.
Path of a txt file which contains all icon names. c

`jsPrefix`

Type: String
Default value: '/* eslint-disable */\n'
Js file content prefix.

`cssFontPath`

Type: String
Default value: path.relative(path.dirname(options.cssOutput), options.fontsOutput);
Font url path in cssOutput file.

`glyphTransformFn`

Type: Function
Default value: undefined;
A function to modify glyphData.metadata. Optional.

`notWatchFile`

Type: Boolean
Default value: false;
Do not watch svgs files. Optional.

`maskPwd`

Type: Boolean
Default value: false; use true to generate ascii chars font as a black dot.
If you use <input type="password"/>, the browser will show a dialog to ask user for saving password. This will take security issues because the saved passwords can be decrypted.
To prevent this happening, you can use <input type="text" style="font-family:'my-app-icon'"/>, and it can show all the ascii chars as black dots.

Other options for advanced

startUnicode: specify start char unicode, default is 0x554a.
descent: it is useful for vertical align, default is 0.

Other options such as startUnicode, prependUnicode etc. in defaultOptions.js.

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to webpack-iconfont-plugin-nodejs

webpack-iconfont-plugin-nodejs

Installations

Developer Guide

No

CommonJS

16.20.2

8.19.4

Score

Pull Requests

3

35

8

24

Issues

0

20

20

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

hzsrc

Download Statistics

GitHub Statistics

Bundle Size

464.84 kB

147.73 kB

Maintainers

Package Meta Information

Total Downloads

222,953

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

webpack-iconfont-plugin-nodejs

Features:

Test for preview:

Install:

Usage:

1. Use by nodejs directly:

2. Use by webpack:

Options

svgs (required)

fontsOutput (required)

cssOutput (required)

fontName

htmlOutput

template

htmlTemplate

formats

cssPrefix

jsOutput

namesOutput

jsPrefix

cssFontPath

glyphTransformFn

notWatchFile

maskPwd

Other options for advanced

10

10

0

0

0

0

0

0

0

0

1.7

/10

`svgs` (required)

`fontsOutput` (required)

`cssOutput` (required)

`fontName`

`htmlOutput`

`template`

`htmlTemplate`

`formats`

`cssPrefix`

`jsOutput`

`namesOutput`

`jsPrefix`

`cssFontPath`

`glyphTransformFn`

`notWatchFile`

`maskPwd`