关于Iconfont

[zuiidea]

演示地址：http://47.92.30.98:666/UIElement/iconfont

扩展Antd的Icon，总结Iconfont在项目中的使用方法：

• 在iconfont官网上创建图标项目
• 注意设置Symbol 前缀和Font Family

一、 font-class引用，单色

• 在src/utils/config.js设置iconFontCSS，该路径可为线上地址，或者本地路径（下载后放到public目录中）
• 使用：<Iconfont type="home" />

二、 symbol引用，可彩色图标

• 在src/utils/config.js设置iconFontJS，该路径可为线上地址，或者本地路径（下载后放到public目录中）
• 使用：<Iconfont colorful type="boluo" />

单个SVG图标的使用方法

一、 先导入再使用

• 将svg图标放入src/svg目录中
• 使用

import '../../svg/emoji/vomiting.svg'
<Iconfont colorful type="vomiting" />

一、 require直接使用

<Iconfont colorful type={require('../../svg/emoji/vomiting.svg')} />

[blackboyhc]

将iconFontJS和iconFontCSS设置成本地路径后还是会去网络请求字体，因为antd中指定的icon-url还是设定的网络的，这个可以解决吗？因为项目可能只在内网用。

[zuiidea]

@blackboyhc 这个方案是扩展，而不是覆盖，覆盖需要在themes/default.less里设置

@icon-url :'"icon-url"'

• icon-url设置为本地的，将资源放在public目录

• icon-url设置为iconfont网站上的url，这样可以覆盖，但是会有个问题，因为自己iconfont项目里的Unicode(16进制)和antd里的不对应，导致antd组件的一些小图标显示不出来

• 这是antd在iconfont上的项目，希望对你有帮助
  http://www.iconfont.cn/collections/detail?cid=790

[blackboyhc]

@zuiidea
我试了在themes/default.less里设置，
@icon-url: '"public/iconfont"';
出现下面问题

PickLHiMac:antd-admin picklh$ npm run build
@ build /Users/picklh/work/nodejs/antd-admin
roadhog build --analyze

Creating an optimized production build...
Failed to compile.

Module not found: Error: Cannot resolve 'file' or 'directory' ./core/"public/iconfont".eot in >/Users/picklh/work/nodejs/antd-admin/node_modules/antd/lib/style

[zuiidea]

@blackboyhc public目录是资源文件的根目录，本地部署iconfont参考这个commit
c3c8cf6

[LDD123]

根本不好使啊，使用的antd@2,12,3 ,在public文件夹下放置了，和楼上一个问题

[superlbr]

@LDD123
iconfont如何处理加载，跟antd没啥关系，主要看roadhog、umi的处理逻辑。
就这个c3c8cf6 版本来说，iconfont引入完全ok，那简单，对比下代码，看哪里有出入

ps: 另外注意下路径

@icon-url: "/antd/iconfont";

[LDD123]

@superlbr 估计是我的roadhog版本太低了，0.5.4,但是升级到1.4.2，并没有什么卵用

[superlbr]

@LDD123 这个试试吧umijs/umi#246 (comment)

[superlbr]

since antd use svg to replace font, there's already a natural way to use iconfont.