Gathering detailed insights and metrics for rollup-plugin-iconfont
Gathering detailed insights and metrics for rollup-plugin-iconfont
Gathering detailed insights and metrics for rollup-plugin-iconfont
Gathering detailed insights and metrics for rollup-plugin-iconfont
npm install rollup-plugin-iconfont
Typescript
Module System
Node Version
NPM Version
52.7
Supply Chain
84.8
Quality
66.8
Maintenance
25
Vulnerability
95.4
License
Total Downloads
37,111
Last Day
4
Last Week
28
Last Month
250
Last Year
5,328
Minified
Minified + Gzipped
Latest Version
1.0.3
Package Id
rollup-plugin-iconfont@1.0.3
Unpacked Size
27.41 kB
Size
7.85 kB
File Count
18
NPM Version
6.13.4
Node Version
12.16.1
Cumulative downloads
Total Downloads
Last day
-55.6%
4
Compared to previous day
Last week
-69.6%
28
Compared to previous week
Last month
-33.7%
250
Compared to previous month
Last year
-16.2%
5,328
Compared to previous year
Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html-preview file.
npm install rollup-plugin-iconfont
You can use it by nodejs directly or use it in rollup
build/svg2font.js:
1var rollupPluginIconfont = require('rollup-plugin-iconfont'); 2var path = require('path'); 3var dir = 'test/web_project/' 4var options = { 5 fontName: 'my-app-icon', 6 // template: path.join(dir, 'src/fonts/css.njk'), 7 svgs: path.join(dir, 'src/svgs/*.svg'), 8 fontsOutput: path.join(dir, 'src/fonts/'), 9 cssOutput: path.join(dir, 'src/fonts/font.css'), 10 jsOutput: path.join(dir, 'src/fonts/fonts.js'), 11 htmlOutput: path.join(dir, 'src/fonts/font-preview.html'), 12 //formats: ['ttf', 'woff2', 'woff', 'svg'], 13 cssPrefix: 'my-icon' 14}; 15 16rollupPluginIconfont(options).buildStart()
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.
1var rollupPluginIconfont = require('rollup-plugin-iconfont'); 2module.exports = { 3 //... others 4 plugins: [ 5 rollupPluginIconfont({ 6 fontName: 'my-app-icon', 7 // template: path.join(dir, 'src/fonts/css.njk'), 8 svgs: path.join(dir, 'src/svgs/*.svg'), 9 fontsOutput: path.join(dir, 'src/fonts/'), 10 cssOutput: path.join(dir, 'src/fonts/font.css'), 11 jsOutput: path.join(dir, 'src/fonts/fonts.js'), 12 htmlOutput: path.join(dir, 'src/fonts/font-preview.html'), 13 //formats: ['ttf', 'woff2', 'woff', 'svg'], 14 cssPrefix: 'my-icon' 15 }), 16 ] 17}; 18
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.
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.