icon-color 图标
-
考试#icon-hegebiaozhun
-
bar-chart#icon-bar-chart
-
blog#icon-blog
-
收藏#icon-shoucang
-
书#icon-book-2
-
黑板-2#icon-blackboard-2
-
蜡笔#icon-crayons
-
奖杯#icon-cup
-
abc#icon-abc
-
奖章#icon-medal
-
学位帽#icon-mortarboard-1
-
铅笔#icon-pencil-1
-
收藏#icon-shoucang1
-
考卷#icon-iconset-09
-
公告#icon-id-321
-
录播学习#icon-luboxuexi
-
思考,观察#icon-eye-vision-goal-plan-structure-define-think-watch-office-fcabecd
-
错题图标#icon-cuotitubiao
-
用户(女)#icon-user-girl
-
收藏#icon-shoucang2
-
编辑#icon-edit
-
地址#icon-position
-
设置#icon-set
-
用户(男)#icon-user-boy
-
电脑#icon-pc
-
收藏#icon-shoucang3
-
公告icon#icon-gonggaoicon
-
business-color_board-30#icon-business-color_board-
-
business-color_briefcase-24#icon-business-color_briefcase-
-
media-color-1_camera-18#icon-media-color-_camera-
-
objects-color_diamond#icon-objects-color_diamond
-
objects-color_globe#icon-objects-color_globe
-
shopping-color_cart-modern-in#icon-shopping-color_cart-modern-in
-
tech-color_desktop#icon-tech-color_desktop
-
tech-color_keyboard#icon-tech-color_keyboard
-
tech-color_print#icon-tech-color_print
-
订单统计-01-01#icon-dingdantongji--
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./icon-color.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>