react-lz-editor
Version:
An open source react rich-text editor (mordern react editor includes media support such as texts, images, videos, audios, links etc.), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode.
944 lines (826 loc) • 39.7 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<script src="iconfont.js"></script>
<style type="text/css">
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_time"></use>
</svg>
<div class="name">日历</div>
<div class="fontclass">#icon-panorama_time</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yinyong"></use>
</svg>
<div class="name">引用</div>
<div class="fontclass">#icon-yinyong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
</svg>
<div class="name">图片 </div>
<div class="fontclass">#icon-tupian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangdian"></use>
</svg>
<div class="name">商店</div>
<div class="fontclass">#icon-shangdian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yonghuzumingcheng"></use>
</svg>
<div class="name">用户组名称</div>
<div class="fontclass">#icon-yonghuzumingcheng</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_joinuser"></use>
</svg>
<div class="name">42业务办理情况统计</div>
<div class="fontclass">#icon-panorama_joinuser</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_joindevice"></use>
</svg>
<div class="name">43科室办理情况统计</div>
<div class="fontclass">#icon-panorama_joindevice</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangpin"></use>
</svg>
<div class="name">商品</div>
<div class="fontclass">#icon-shangpin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hotword"></use>
</svg>
<div class="name">转化词</div>
<div class="fontclass">#icon-hotword</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-newsVerify"></use>
</svg>
<div class="name">订阅</div>
<div class="fontclass">#icon-newsVerify</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-access_user"></use>
</svg>
<div class="name">权限_角色</div>
<div class="fontclass">#icon-access_user</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sensitiveword"></use>
</svg>
<div class="name">词-禁</div>
<div class="fontclass">#icon-sensitiveword</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xitong"></use>
</svg>
<div class="name">系统</div>
<div class="fontclass">#icon-xitong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ydh"></use>
</svg>
<div class="name">高级人才</div>
<div class="fontclass">#icon-ydh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-undo"></use>
</svg>
<div class="name">undo</div>
<div class="fontclass">#icon-undo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-h3"></use>
</svg>
<div class="name">H3</div>
<div class="fontclass">#icon-h3</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-h21"></use>
</svg>
<div class="name">H2</div>
<div class="fontclass">#icon-h21</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-H1"></use>
</svg>
<div class="name">H1</div>
<div class="fontclass">#icon-H1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dropdown"></use>
</svg>
<div class="name">下拉</div>
<div class="fontclass">#icon-dropdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yidianhaoleibie"></use>
</svg>
<div class="name">分类</div>
<div class="fontclass">#icon-yidianhaoleibie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redo"></use>
</svg>
<div class="name">redo</div>
<div class="fontclass">#icon-redo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unie60e"></use>
</svg>
<div class="name">加载</div>
<div class="fontclass">#icon-unie60e</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yidianhaowenzhang"></use>
</svg>
<div class="name">报刊杂志</div>
<div class="fontclass">#icon-yidianhaowenzhang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-empty"></use>
</svg>
<div class="name">清空</div>
<div class="fontclass">#icon-empty</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lunbozutu"></use>
</svg>
<div class="name">轮播组图</div>
<div class="fontclass">#icon-lunbozutu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-quanzi"></use>
</svg>
<div class="name">圈子</div>
<div class="fontclass">#icon-quanzi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-recycleNews"></use>
</svg>
<div class="name">归档</div>
<div class="fontclass">#icon-recycleNews</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tiezi"></use>
</svg>
<div class="name">帖子</div>
<div class="fontclass">#icon-tiezi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unie6672"></use>
</svg>
<div class="name">uniE6672</div>
<div class="fontclass">#icon-unie6672</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-untitled22"></use>
</svg>
<div class="name">untitled22</div>
<div class="fontclass">#icon-untitled22</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unie604"></use>
</svg>
<div class="name">uniE604</div>
<div class="fontclass">#icon-unie604</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-untitled144"></use>
</svg>
<div class="name">untitled144</div>
<div class="fontclass">#icon-untitled144</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-listol"></use>
</svg>
<div class="name">list-ol</div>
<div class="fontclass">#icon-listol</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-newsChannel1"></use>
</svg>
<div class="name">tab-edit-tab</div>
<div class="fontclass">#icon-newsChannel1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-score"></use>
</svg>
<div class="name">积分-17</div>
<div class="fontclass">#icon-score</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-quanziline"></use>
</svg>
<div class="name">圈子_line</div>
<div class="fontclass">#icon-quanziline</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-piliangicon"></use>
</svg>
<div class="name">日志</div>
<div class="fontclass">#icon-piliangicon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yidianhaotiaomu"></use>
</svg>
<div class="name">项目-</div>
<div class="fontclass">#icon-yidianhaotiaomu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianji"></use>
</svg>
<div class="name">点击</div>
<div class="fontclass">#icon-dianji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fans"></use>
</svg>
<div class="name">粉丝</div>
<div class="fontclass">#icon-fans</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-radarchart"></use>
</svg>
<div class="name">radar chart</div>
<div class="fontclass">#icon-radarchart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huodong"></use>
</svg>
<div class="name">活动</div>
<div class="fontclass">#icon-huodong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paixu"></use>
</svg>
<div class="name">list-ol</div>
<div class="fontclass">#icon-paixu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-news"></use>
</svg>
<div class="name">新闻</div>
<div class="fontclass">#icon-news</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiangpai"></use>
</svg>
<div class="name">奖牌</div>
<div class="fontclass">#icon-jiangpai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-quanping"></use>
</svg>
<div class="name">全屏</div>
<div class="fontclass">#icon-quanping</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-appclient"></use>
</svg>
<div class="name">应用客户端设置</div>
<div class="fontclass">#icon-appclient</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenzi01"></use>
</svg>
<div class="name">文字-01</div>
<div class="fontclass">#icon-wenzi01</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-neirong"></use>
</svg>
<div class="name">内容</div>
<div class="fontclass">#icon-neirong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paixu1"></use>
</svg>
<div class="name">排序</div>
<div class="fontclass">#icon-paixu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-newsComment"></use>
</svg>
<div class="name">新闻评论回复</div>
<div class="fontclass">#icon-newsComment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bumen"></use>
</svg>
<div class="name">部门</div>
<div class="fontclass">#icon-bumen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pinpai"></use>
</svg>
<div class="name">品牌</div>
<div class="fontclass">#icon-pinpai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-newsChannel"></use>
</svg>
<div class="name">tab-unselected</div>
<div class="fontclass">#icon-newsChannel</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yonghuxinxixian"></use>
</svg>
<div class="name">用户信息－线</div>
<div class="fontclass">#icon-yonghuxinxixian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_app"></use>
</svg>
<div class="name">APP</div>
<div class="fontclass">#icon-panorama_app</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_today"></use>
</svg>
<div class="name">人群－上网时段</div>
<div class="fontclass">#icon-panorama_today</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tuisong"></use>
</svg>
<div class="name">推送</div>
<div class="fontclass">#icon-tuisong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yaochi"></use>
</svg>
<div class="name">钥匙</div>
<div class="fontclass">#icon-yaochi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gengxinupdated"></use>
</svg>
<div class="name">更新_updated</div>
<div class="fontclass">#icon-gengxinupdated</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_version"></use>
</svg>
<div class="name">版本</div>
<div class="fontclass">#icon-panorama_version</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wochuangjiande"></use>
</svg>
<div class="name">班级信息修改</div>
<div class="fontclass">#icon-wochuangjiande</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ditu-copy-copy"></use>
</svg>
<div class="name">地图</div>
<div class="fontclass">#icon-ditu-copy-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jingxuan-copy"></use>
</svg>
<div class="name">精选</div>
<div class="fontclass">#icon-jingxuan-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yichu"></use>
</svg>
<div class="name">移除</div>
<div class="fontclass">#icon-yichu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cf-c85"></use>
</svg>
<div class="name">音频</div>
<div class="fontclass">#icon-cf-c85</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_newboot"></use>
</svg>
<div class="name">join</div>
<div class="fontclass">#icon-panorama_newboot</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama"></use>
</svg>
<div class="name">统计</div>
<div class="fontclass">#icon-panorama</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_device"></use>
</svg>
<div class="name">APP</div>
<div class="fontclass">#icon-panorama_device</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lunbotuzujian"></use>
</svg>
<div class="name">轮播图组件</div>
<div class="fontclass">#icon-lunbotuzujian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-order"></use>
</svg>
<div class="name">排序</div>
<div class="fontclass">#icon-order</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sort"></use>
</svg>
<div class="name">排序</div>
<div class="fontclass">#icon-sort</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-listul"></use>
</svg>
<div class="name">list-ul</div>
<div class="fontclass">#icon-listul</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-anquanzhongxin"></use>
</svg>
<div class="name">安全中心</div>
<div class="fontclass">#icon-anquanzhongxin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhanghuyuquanxian"></use>
</svg>
<div class="name">账户与权限</div>
<div class="fontclass">#icon-zhanghuyuquanxian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lianjie"></use>
</svg>
<div class="name">链接</div>
<div class="fontclass">#icon-lianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-panorama_action"></use>
</svg>
<div class="name">活跃数据</div>
<div class="fontclass">#icon-panorama_action</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yidianhaoshenhe"></use>
</svg>
<div class="name">初审</div>
<div class="fontclass">#icon-yidianhaoshenhe</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-duanluo1"></use>
</svg>
<div class="name">段落1</div>
<div class="fontclass">#icon-duanluo1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaosequanxian0101"></use>
</svg>
<div class="name">角色权限</div>
<div class="fontclass">#icon-jiaosequanxian0101</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-centralalignment"></use>
</svg>
<div class="name">central-alignment</div>
<div class="fontclass">#icon-centralalignment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leftalignment"></use>
</svg>
<div class="name">left-alignment</div>
<div class="fontclass">#icon-leftalignment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rightalignment"></use>
</svg>
<div class="name">right-alignment</div>
<div class="fontclass">#icon-rightalignment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shipin"></use>
</svg>
<div class="name">视频</div>
<div class="fontclass">#icon-shipin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-city"></use>
</svg>
<div class="name">城市</div>
<div class="fontclass">#icon-city</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tupian1"></use>
</svg>
<div class="name">图片</div>
<div class="fontclass">#icon-tupian1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-startpage"></use>
</svg>
<div class="name">手机截屏</div>
<div class="fontclass">#icon-startpage</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bold"></use>
</svg>
<div class="name">加粗</div>
<div class="fontclass">#icon-bold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaosesheding"></use>
</svg>
<div class="name">角色设定</div>
<div class="fontclass">#icon-jiaosesheding</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chuangjianjiaose"></use>
</svg>
<div class="name">创建角色</div>
<div class="fontclass">#icon-chuangjianjiaose</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yidianhao"></use>
</svg>
<div class="name">用户等级</div>
<div class="fontclass">#icon-yidianhao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gongzuoxiang"></use>
</svg>
<div class="name">工作项</div>
<div class="fontclass">#icon-gongzuoxiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iconactivitypre"></use>
</svg>
<div class="name">icon_activity_pre</div>
<div class="fontclass">#icon-iconactivitypre</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xietiim"></use>
</svg>
<div class="name">斜体-im</div>
<div class="fontclass">#icon-xietiim</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-grab"></use>
</svg>
<div class="name">获取icon</div>
<div class="fontclass">#icon-grab</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-draft"></use>
</svg>
<div class="name">投稿</div>
<div class="fontclass">#icon-draft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caozuowenzi"></use>
</svg>
<div class="name">操作_文字</div>
<div class="fontclass">#icon-caozuowenzi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-centeringalignment"></use>
</svg>
<div class="name">centering alignment</div>
<div class="fontclass">#icon-centeringalignment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenbenzhantie"></use>
</svg>
<div class="name">文本粘贴</div>
<div class="fontclass">#icon-wenbenzhantie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiahuaxian"></use>
</svg>
<div class="name">下划线</div>
<div class="fontclass">#icon-xiahuaxian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-channelpd-copy"></use>
</svg>
<div class="name">1频道</div>
<div class="fontclass">#icon-channelpd-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bumen-copy"></use>
</svg>
<div class="name">部门</div>
<div class="fontclass">#icon-bumen-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-10106-copy"></use>
</svg>
<div class="name">角色管理</div>
<div class="fontclass">#icon-10106-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-h4"></use>
</svg>
<div class="name">H4</div>
<div class="fontclass">#icon-h4</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tougao"></use>
</svg>
<div class="name">投稿</div>
<div class="fontclass">#icon-tougao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-updtpwd"></use>
</svg>
<div class="name">修改密码</div>
<div class="fontclass">#icon-updtpwd</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-leida"></use>
</svg>
<div class="name">icon_radar</div>
<div class="fontclass">#icon-leida</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-duankailianjie"></use>
</svg>
<div class="name">断开链接</div>
<div class="fontclass">#icon-duankailianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiangpica"></use>
</svg>
<div class="name">清除样式</div>
<div class="fontclass">#icon-xiangpica</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chart-radar"></use>
</svg>
<div class="name">chart-radar</div>
<div class="fontclass">#icon-chart-radar</div>
</li>
</ul>
<h2 id="symbol-">symbol引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
<li>兼容性较差，支持 ie9+,及现代浏览器。</li>
<li>浏览器渲染svg的性能一般，还不如png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
.icon {
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
vertical-align: <span class="hljs-number">-0.15</span>em;
fill: currentColor;
overflow: hidden;
}
<<span class="hljs-regexp">/style></span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
</span><<span class="hljs-regexp">/svg>
</span></code></pre>
</div>
</body>
</html>