Gathering detailed insights and metrics for webpack-svg-iconfont-plugin-nodejs
Installations
npm install webpack-svg-iconfont-plugin-nodejsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.17.0
NPM Version
6.13.4
Score
53
Supply Chain
85.3
Quality
66.3
Maintenance
25
Vulnerability
95.4
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
370
Last Day
1
Last Week
1
Last Month
7
Last Year
52
Bundle Size
2.10 MB
Minified
493.73 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.1
Package Id
webpack-svg-iconfont-plugin-nodejs@0.0.1
Unpacked Size
87.89 kB
Size
33.77 kB
File Count
40
NPM Version
6.13.4
Node Version
8.17.0
Total Downloads
Cumulative downloads
Total Downloads
370
Last day
0%
1
Compared to previous day
Last week
0%
1
Compared to previous week
Last month
40%
7
Compared to previous month
Last year
-17.5%
52
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
11
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 fontsOutput: path.join(dir, 'fonts/'), 10 cssOutput: path.join(dir, 'fonts/font.css'), 11 htmlOutput: path.join(dir, 'fonts/_font-preview.html'), 12 jsOutput: path.join(dir, 'fonts/fonts.js'), 13 // formats: ['ttf', 'woff', 'svg'], 14}; 15 16new 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 // formats: ['ttf', 'woff', 'svg'], 17 }), 18 ] 19}; 20
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.
jsOutput
Type: String
Default value: undefined.
Path of a js file which contains all svg contents. Optional.
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.
Other options for advanced
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.
No security vulnerabilities found.