阿里UX矢量图标库–最强大的矢量图标库（Icon font制做力荐工具）

继前面介绍过ICON-FONT的制做后，找了几个ICON库都是国外的
今天偶然发现阿里巴巴的图标矢量库，www.iconfont.cn 
用了以后感受很强大，丰富的图标库(集合阿里妈妈&淘宝的图标库)，还支持本身上传，关键还能生成你项目专用的CDN，速度不言而喻，支持国产。下面引用介绍

转载请注明来源：Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库（Icon font制做力荐工具）

 

使用SVG来代替Web Iconfont(图形字体化)

 

从最开始的，使用img图片到后来的使用css sprite(web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操做教程）)来减小服务器请求，到如今流行使用的图形字体化iconfont(阿里UX矢量图标库–最强大的矢量图标库（Icon font制做力荐工具）)
可是，Iconfont存在一些弊端：

1. 浏览器将其视为文字进行抗锯齿优化，有时获得的效果并无想象中那么锐利。 尤为是在不一样系统下对文字进行抗锯齿的算法不一样，可能会致使显示效果不一样。
2. Icon Font 做为一种字体，Icon 显示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响，调整起来很不方便。
3. 使用上存在不便。首先，加载一个包含数百图标的 Icon Font，却只使用其中几个图标，很是浪费加载时间。 若是是本身制做 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也很是不方便。固然使用阿里UX矢量图标库能够解决这个问题
4. 为了实现最大程度的浏览器支持，可能要提供至少四种不一样类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。若是是本身制做的话，可能要头疼死

SVG优点

1. SVG是矢量图形文件，能够随意改变大小，而不影响图标质量。
2. 能够用CSS样式来自由定义图标颜色，好比颜色/尺寸等效果。
3. 全部的SVG能够所有在一个文件中，节省HTTP请求 。
4. 使用SMIL、CSS或者是javascript能够制做充满灵性的交互动画效果。
   因为SVG也是一种XML节点的文件，因此可使用gzip的方式把文件压缩到很小。

开发者们想出了多种使用 SVG 的技巧来解决/缓解上述问题，下面咱们来逐个盘点目前常见的使用方法。

img/object 标签

使用 img 和 object 标签直接引用 SVG 是早期常见的使用方法。 这种方法的缺点主要在于要求每一个图标都单独保存成一个 SVG 文件，使用时也是单独请求的。 若是在页面中使用的多个图标，每一个都是单独请求的话会产生不少请求数，增长服务端的负载和拖慢页面加载速度， 所以如今不多使用了。
不过，在 IE 中可使用 object 标签实现最后讨论的 SVG Defs/Symbols 的效果。

Inline SVG

所谓 Inline SVG，就是直接把 SVG 写入 HTML 中，这种方法简单直接，并且具备最强的可调性。 使用这种方法，你可使用 CSS 的fill属性和stroke属性来控制填充颜色和边线的颜色， 若是 SVG 图标包含多个部分，你甚至能够设置每一个部分的样式。同时，使用 JavaScript 修改 SVG 和生成动画效果均可以实现。
Inline SVG 做为 HTML 文档的一部分，不须要单独请求。临时须要修改某个图标的形状也比较方便。 可是 Inline SVG 使用上比较繁琐，须要在页面中插入一大块 SVG 代码所以不适合手写，图标复用起来也比较麻烦。
好在咱们大部分的页面都是由某种模板渲染出来的，不管是使用 PHP、Jinja2 仍是 ERuby 模板语言， 均可以定义一个函数来帮咱们 include 这些 SVG。所以在不少状况下是很好的解决方案， 其不适合的主要使用场景就是纯静态页面或者先后端分离客户端页面。

Data URIs

Data URIs 是一种不怎么常见的技巧。以前咱们在 CSS 里定义元素的背景图片时，常使用像下面这种方式

.icon {
  backgound-image: url(icons/a.png)
  /* ... */
}

而如今，url当中能够放置的能够不只仅是指向资源的 URL 连接，而能够是数据自己。使用 Data URIs，不管是图片仍是 SVG， 你均可以将其编码为 base64 并直接写入 CSS。譬如

.icon{
  background: url(data:text/svg+xml;base64,<base64 encoded data>)
}

关于 base64 编码，以前我写过一篇使用Data URIs来提升你的网站速度使用这种方法，SVG Icon 使用起来和 Icon Font 同样只须要为元素添加 CSS 便可，全部的资源均可以整合在一个 CSS 文件中，
不须要额外引用 SVG 文件。
若是你在使用 Gulp 或者 Grunt 这样的 Build 工具，那么将 SVG 整合到一个 CSS
当中是能够很是方便地自动化完成的。这个任务只有简单的字符串和编码处理，基本不须要依赖非 JavaScript 的库和资源。

使用这种方法的缺点是不能方便地使用 CSS 修改 Icon 的颜色和边线属性。

SVG Sprite

目前，一些提供制做 Icon Font 功能的网站 (如icomoon) 已经提供输出 SVG Sprites 功能了。
SVG Sprites 能够看作上述 Data URIs 方法和以前使用位图的 Sprite 方法的组合。

在 Icon Font 还没普及、图标还主要依靠位图显示的时候，前端工程师都会使用 Sprite 来减小图片请求的次数。 其原理很简单：将全部的图标以必定的间隔排列起来组成一整张大图片，使用时对于某个 Icon，编写以下所示的 CSS。

.icon-a {
  background-image: url(/path/to/pic/contains/all/icons.png);
  background-position: 0 120px !important;
  width: 24px;
  height: 24px;
}

 上述 CSS 经过设定background-position调整大图片在背景中的位移，只将某个单个 Icon 暴露出来，其余部分都切掉。 对于全部的 Icon 都写成这样的 CSS 便可使用了。基础的 SVG Sprite 其实只是将原来的位图改为了 SVG。

SVG Sprite 相比于原来的位图 Sprite 的一个优势就是能够经过 CSS 调整 Icon 显示的大小。 使用时还能够 Fallback 到位图的 Sprite，所以有极好的浏览器兼容性。 不过和 Data URIs 方法同样它一样存在不能方便调整颜色样式的问题。目前辅助生成 SVG Sprites 的工具备 grunt-iconizr、
gulp-svg-sprites 等。
使用这两个工具，只需将用到的 SVG 放到某个文件夹中就能够自动被拼合成 Sprite 并输出对应 CSS。
两个工具都支持生成 PNG 格式的位图做为 Fallback，缺点是生成位图要依赖phantomjs
这个重量级 JS 库。

SVG Defs/Symbols

SVG Defs 和 Symbols 的原理相似，这里着重介绍一下 SVG Symbols 的使用， SVG Defs/Symbols 本质上是对 Sprite 的进一步优化。以前，咱们须要使用相对位置来控制哪一个图标被显示出来， 可是其实 SVG 自己的定义容许你以某一种方式直接引用 SVG 中的某一部分。
将多个图标整合成一个 SVG 中的多个 Symbols 以后是下面这样的

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
    <symbol id="circle-cross" viewBox="0 0 32 32">
      <title>circle-cross icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>
 
    <symbol id="circle-check" viewBox="0 0 32 32">
      <title>circle-check icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>
 
    <!-- .... -->
</svg>

 

每一个 Symbol 设置一个 id 做为引用时的名字。使用 id 引用这个 SVG 中的 Icon 有两种方式。第一种，将上述 SVG 做为 body 的第一个元素插入在 HTML 中 (Chrome 存在一个
bug 致使不在这里显示不出图像)，
此后，在须要显示某个 Icon 的地方插入下面的代码便可：

<svg class="icon">
  <use xlink:href="#circle-cross"></use>
</svg>

 这里的use标签直接使用#circle-cross这个 id 引用了 SVG 中的图标。这种方式的浏览器兼容性较好。

第二种方式，这种方式不须要在 body 开始的地方插入 SVG，而是使用完整路径引用 Icon。

<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>

 

显示出来的效果就是下面这个样子 (可使用浏览器的 Debug 工具来检视下面的代码)。

 

这种方式使用上跟img标签没有什么太大的差异了。好处在于全部的图标都在一个文件中，所以只会请求一次。 这种不须要像 Sprite 那样繁琐的设置图片的位移。使用 id 命名图标并使用时直接使用 id 引用既直观又简单。 其灵活性和 Inline SVG 几乎同样——你能够设置颜色、边线样式、大小等等。 视浏览器的不一样，有时你须要使用做为 SVG 标签的开始。

<svg xmlns="http://www.w3.org/2000/svg">

 

对于 IE 则须要使用object标签代替<svg><use>。关于兼容性讨论详见
这篇文章。

除了前面提到过的几个 Gulp 和 Grunt 的插件都已经支持 SVG Defs/Symbols 了以外，这里再推荐一个更轻量的 Gulp 插件
gulp-svg-symbols。若是只使用 SVG Symbols 而无需 Sprite 支持，
那么使用 gulp-svg-symbols 能够免去对 phantomjs
的依赖。

原文地址：http://www.w3cways.com/1733.html