uino-icon-font
v0.3.0
Published
``` npm install uino-icon-font -D ``` ## 对于已经eject了的create-react-app用户来说
Downloads
5
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后输出的文件夹引用。