图标站及icon-font使用说明
2021-07-20 by uino 236 技术组件

图标站的注意事项

  1. 为了保证可读性,如需复数单词命名图标建议使用 Arrow Left 此类命名方式(即使不这样命名,也会被强制更改为此类),但同时为了保证可用性,图标真实名称还是会保存为arrow-left。
  2. 上传图标一次最多只能上传20个,如需要上传更多文件,可选择连续上传按钮保存选择过的标签。

使用贴士:

推荐使用iconmonstr站点的图标,阿里的iconfont可能会导致字体大小出错。不过不影响下载。

本站点提供展示,点击展示的图标可对图标的大小和颜色进行修改,并下载为png文件。

在浏览图标界面长按图标可复制图标名称。

npm插件的安装

npm install uino-icon-font -D

注意:本插件仅适用于适用webpack打包的项目

React用户的使用方法

使用create-react-app脚手架创建的项目

我已执行过eject

配置

更改webpack:

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

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

            // ** 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(),

配置webpackDevServer.config.js

watchOptions: {
      ignored: [/node_modules([\\]+|\/)+(?!uino-icon-font)(?:[\\]+|\/)+src(?:[\\]+|\/)+tmpcss(?:[\\]+|\/)+iconfont.css/]
    },

配置完成,可以使用了

我没有执行过eject

配置:

将node_modules/uino-icon-font/config-overrides.js放到项目根目录下。

const path = require('path')
const { fontLoaderPath, KissFontPlugin } = require('uino-icon-font/dist/setting')
const {overrideDevServer} = require('customize-cra');

module.exports = {
  webpack: function (config, env) {
    config.plugins[config.plugins.length] = new KissFontPlugin()
    config.module.rules.push({
      test: /\.(jsx)|(tsx)$/,
      exclude: [path.resolve(__dirname, '../', 'node_modules'), path.resolve(__dirname, 'node_modules')],
      use: [fontLoaderPath]
    });
    return config;
  },
  devServer: overrideDevServer((config)=>{config.watchOptions.ignored = [/node_modules([\\]+|\/)+(?!uino-icon-font(?:[\\]+|\/))+src(?:[\\]+|\/)+tmpcss(?:[\\]+|\/)+iconfont.css/];return config})
}



更改package.json的script字段

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject",
},

配置完成,可以使用了

使用umi脚手架创建的项目

配置:

在.umirc.ts中

import {fontLoaderPath,KissFontPlugin} from 'uino-icon-font/dist/setting'

配置自己的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>

目前无法导入.css文件只能麻烦一下在随便哪个组件里手动引入一下了

需要在配置文件 uino-icon-font/src/Icons.config.js 中自行修改打包后文件夹的名称,如umi的叫dist,将默认的build改为dist即可

npm插件的使用

在网站上找到心仪的图标,记住它的名字

在你的组件里

import Icon from 'uino-icon-font'
<Icon name="example"></Icon>

原理

通过loader读取你的组件来判断使你用了哪些图标并将其下载到临时文件夹,通过vusion-webfonts-generator打包成css和字体文件,打包到build后输出的文件夹引用。