关于Iconfont
zuiidea opened this issue · 9 comments
演示地址：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')} />
将iconFontJS和iconFontCSS设置成本地路径后还是会去网络请求字体，因为antd中指定的icon-url还是设定的网络的，这个可以解决吗？因为项目可能只在内网用。
@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
@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
@blackboyhc public目录是资源文件的根目录，本地部署iconfont参考这个commit
c3c8cf6
根本不好使啊，使用的antd@2,12,3 ,在public文件夹下放置了，和楼上一个问题