Svg2Iconfont-webpack

A webpack plugin for svg transform to iconfont automatically.🎉

why use?

English:

1. You can package all svg files to iconfont bundle.
2. You can use it in your code by setting ClassName(the same as filename) directly without any import or require.
3. All process is automatic, you don't care about anything;

中文:

1. 你可以根据指定资源路径，打包所有的svg文件，统一生成一份iconfont文件
2. 整个流程都是自动的，统一生成的文件也是自动引入的，你不用另外的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 = require("svg2iconfont-webpack");
const path = require('path');

const resolve = oppositePath => {
  return path.resolve(__dirname, oppositePath);
};

module.exports = {
  plugins: [
    new Svg2IconfontWebpack({
      // 你的资源文件夹根目录
      // your svg assets root url
      assetsPath: resolve("./assets/icon"),
      // 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" -->
<i class="iconfont-my-icon-file-name"></i>

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" -->
<i class="my-icon-class"></i>

Css

/* your icon class */
.my-icon-class::after {
  /* your icon unicode */
  content: "\0e602"; 
}

LICENSE

MIT