uino-icon-font
v0.3.0
Published
``` npm install uino-icon-font -D ``` ## 对于已经eject了的create-react-app用户来说
Downloads
3
Readme
安装：
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 ,自行修改
使用：
在网站上找到心仪的图标，记住他的名字
在你的组件里
import Icons from 'uino-icon-font'<Icons name="example"></Icons>原理
通过loader读取你的组件来判断使你用了哪些图标并将其下载到临时文件夹，通过vusion-webfonts-generator打包成css和字体文件，打包到build后输出的文件夹引用。