APP 开发 阿里图库 矢量图标 的应用 (附视频)
开发APP，少不了要用一些图标 ，目前MUI 移动框架提供的图标有限 MUI自带图标，很多不能满足我们的APP风格使用,如果你们有设计师设计图标并制作成矢量图最好，如果没有 这时我们可以在一些第三网站去获取，例如：阿里图库
矢量图标有什么好处，可以大小调整，可以着不同的颜色，而不会模糊，如果是有图片图标，会出现模糊感，对视觉体验不好.
本文介绍的就是 “阿里图库” 这个网站没有注册功能，只能使用 “新浪微博” 或 “Github ” 帐号登录 ，登录之后，选择你喜欢的图标，收藏起来。
阿里图库的图标，有三种引的方式：unicode、Font class、symbol
这次讲下 symbol 的方法使用，它是把图标矢量图，生成JS 文件直接引 js 就可以使用了。
第一步：我们选择好需要的图标后，选择 symbol 把 js 文件下载下来，引用到html文件中。
第二步：写入该图标默认样式，可以通过样式 font-size , color 来修改图标大小和图标的颜色
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：引用图标的代码 #icon-xxx, 是你要引用使用的图标名称
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon-font .icon{ font-size:42px; color: cadetblue;}
</style>
<script src="icon.js"></script> //图标的JS 文件
</head>
<body>
<center class="icon-font">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxxx"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxxx"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxxx"></use>
</svg>
</center>
</body>
</html>
视频播放
加载更多