前端开发会常常用到一些图标。当ui妹子给你提供的图标不能知足你的需求时,能够在 iconfont.cn 上采集并生成本身的业务图标库,再进行使用。css
首先,搜索并找到你须要的图标,将它采集到你的购物车里,在购物车里,你能够将选中的图标添加到项目中(没有的话,新建一个),后续生成前端
的资源/代码都是以项目为维度的。react
来到刚才选中的项目页,点击『生成代码』的连接,会在下方生成不一样引入方式的代码,下面会分别介绍。web
有三种引入方式供你选择:SVG Symbol、Unicode 及 Font class。咱们推荐在现代浏览器下使用 SVG Symbol 方式引入。浏览器
SVG 符号引入是现代浏览器将来主流的图标引入方式。其方法是预先加载符号,在合适的地方引入并渲染为矢量图形。有以下特色:antd
使用步骤以下:svg
//at.alicdn.com/t/font_835630_0rudypqb4a.js
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-ali-pay"></use> </svg>
你也能够经过使用 Ant Design 图标组件提供的 Icon.createFromIconfontCN({...}) 方法来更加方便地使用图标,使用方式以下:字体
import { Icon } from 'antd'; const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js' }); export default IconFont;
<IconFont type="icon-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />
这是最原始的方式,须要三步来完成引入:网站
@font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot'); src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'), url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'), url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg'); }
.iconfont { display: inline-block; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &:before { display: block; font-family: "iconfont" !important; /* 注意与 font-face 中的匹配 */ } }
<i class="iconfont"></i>
//at.alicdn.com/t/font_835630_0rudypqb4a.css
若是不喜欢标签引入的方式,也能够直接拷贝上面连接中的代码到你的样式文件中。若是不喜欢网站默认生成的类名,本身重写这部分代码便可,好比:
- .icon-ali-pay:before { content: "\e66b"; } // 修改前 - .monitor-icon-alipay:before { content: "\e66b"; } // 修改后
<i class="iconfont icon-ali-pay"></i>
不过咱们更推荐将它封装一下:ui
import React from 'react'; const BizIcon = (props) => { const { type } = props; return <i className={`iconfont icon-${type}`} />; }; export default BizIcon;
如今能够更加方便地使用:
<BizIcon type="ali-pay" />
Unicode 和 Font Class 本质上就是字体,你能够经过一些字体的样式属性去控制这种图标的展示,同时浏览器兼容性很好,但不支持多色图标。