Svg2Iconfont-webpack
A webpack plugin for svg transform to iconfont automatically.🎉
why use?
English:
- You can package all svg files to iconfont bundle.
- You can use it in your code by setting ClassName(the same as filename) directly without any import or require.
- All process is automatic, you don't care about anything;
中文:
- 你可以根据指定资源路径,打包所有的svg文件,统一生成一份iconfont文件
- 整个流程都是自动的,统一生成的文件也是自动引入的,你不用另外的import或者require,你只需要启动你的项目(npm start),即可在你的代码里对应文件名直接设置ClassName,即可显示ICON图标。
Getting Started
First of all, install the module:
npm i svg2iconfont-webpack
⚠️ Warning: The webpack-plugin
Svg2Iconfont-webpack
require webpack v4, not support webpack v3.
Usage
const Svg2IconfontWebpack = ;const path = ; const resolve = { return path;}; moduleexports = plugins: // 你的资源文件夹根目录 // your svg assets root url assetsPath: // output(输出配置) output: // 输出字体文件的名称(ttf, otf, etc...) // font-lib name => myIconfont fileName: "myIconfont" // 引入CSS文件的名称 // import css modules name cssFileName: "iconfont-web" // font options(字体配置) fontOptions: // icon类名的前缀 cssPrefix: 'iconfont' // 图标的基准大小 // icon basic size fontSize: 32 // 图标的font-family // font-family fontFamily: 'iconfont' // 是否开启图标列表预览模式 // 预览模式默认监听在本地3000端口,若端口占用依次递增 preview: false
And you can show the icons by setting ClassName(From Filename), the same name from Filename, including the path,but format to '-' sign.
<!-- 你可以通过设置你对应svg文件的文件名(不带svg后缀名),来达到显示图标的目的,注意,如果你的文件是嵌套在文件夹里面的,请输入文件夹 + 文件名的方式来对应显示,分隔符是“-”而不是“/” --><!-- 前缀默认是iconfont,用分隔符和图标名间隔开 --><!-- if you want to show the "my-icon-file-name.svg" ICON --><!-- the className below represent the icons --><!-- `iconfont` from "options.fontOptions.cssPrefix" -->
Then you will see ICON appeared:
OR You can set its unicode by your own className(First, you should know the ICON's unicode)
<!-- add class "icon-iconfont" --><!-- `icon-iconfont` from "options.className" -->
Css
/* your icon class */