Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html-preview file.
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
npm install webpack-iconfont-plugin-nodejs
You can use it by nodejs directly or use it in webpack
build/svg2font.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:
node build/svg2font.js
Or you can set this command to script of package.json, and run it by npm.
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'
}),
]
};
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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。