0.1.2 • Published 3 years ago
icon-for-umi v0.1.2
对于umi用户来说
安装：
npm install icon-for-umi -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后输出的文件夹引用。