Uino-icon-font NPM

安装：

npm install uino-icon-font -D

对于已经eject了的create-react-app用户来说

更改webpack

const {fontLoaderPath,KissFontPlugin} = require('uino-icon-font')

-------------------------

            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
          ],
        },        
        {
          test: /\.(jsx)|(tsx)$/,
          exclude: path.resolve(__dirname,'../', 'node_modules'),
          use: [fontLoaderPath]
        },

注意：一定要放在rule里，放在oneOf后面，不要放到oneOf里

在plugin里面找个顺眼的地方扔进去

      new KissFontPlugin(),

把public里面的index.html复制一份一模一样的叫index_dev.html，在index.html里添加

  <link rel="stylesheet" type="text/css" href="./dest/iconfont.css" />

修改config里面的paths.js文件，在module.exports 里面添加如下字段。

  appHtmlDev: resolveApp('public/index_dev.html'),

修改webpack.config.js

 isEnvProduction?{
            inject: true,
            template: paths.appHtml,
          }:
          {
            inject: true,
            template: paths.appHtmlDev,
          },

对于umi用户来说

配置：

在.umirc.ts中

import {fontLoaderPath,KissFontPlugin} from 'dec-icon-test'

配置自己的chainWebpack:

chainWebpack(config, { env, webpack, createCSSRule }) {
    config.module
      .rule('myLoader')
      .test(/\.tsx$/)
      .exclude.add(/(src\/\.umi)|(src\/\.umi-production)/)
      .end()
      .include.add(/src/)
      .end()
      .use('font-loader.js')
      .loader(fontLoaderPath);
    config.plugin('KissFontPlugin').use(KissFontPlugin);
  },

例子文件在包里有，叫chainWebpack.example.js

添加html模板，新建 src/pages/document.ejs

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Your App</title>
  <link href="./dest/iconfont.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="root"></div>
</body>
</html>

配置文件 Icons.config.js ,自行修改