npm install dec-icon-test -D
在.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 ,自行修改
在网站上找到心仪的图标，记住他的名字
在你的组件里
import Icons from 'dec-icon-test'
<Icons name="example">
通过loader读取你的组件来判断使你用了哪些图标并将其下载到临时文件夹，通过vusion-webfonts-generator打包成css和字体文件，打包到build后输出的文件夹引用。