摘要：但它仍有缺陷字體需要加載資源有時(shí)候可能會(huì)出現(xiàn)鋸齒只能被渲染成單色或者的漸變色所以我們要繼續(xù)進(jìn)化。直立人之使用，這里所謂的進(jìn)化并不是本身的進(jìn)化，因?yàn)椴⒉煌碛?。隨著外界因素的進(jìn)化，的淘汰，的開始，的機(jī)會(huì)變到來(lái)了。

看到上面這張圖，相信好多資深前端會(huì)感到很親切。

早期為了減少資源的請(qǐng)求，人們想到了將小的 png 圖片合并到一張圖上，然后根據(jù) background-position 來(lái)顯示不同的圖片。

早期還有靠人肉來(lái)測(cè)量坐標(biāo)，隨著構(gòu)建工具的發(fā)展，我們可以用一些插件，如 grunt-spritesmith、gulp.spritesmith 等。它可以幫助我們自動(dòng)合成，并生成好 css， 位置都計(jì)算好的。

那么使用 png 圖片這種方式它的優(yōu)點(diǎn)就是兼容性好。但是一旦開發(fā)多了，它的不便變體現(xiàn)出來(lái)了，換顏色、改大小、透明度、多倍屏等等。

所以對(duì)于這種方式我們只能緬懷。

于是人們又想出了用字體文件取代圖片文件：Iconfont。

雖然早期制作或?qū)ふ液线m字體比較麻煩，但隨著各種字體庫(kù)的網(wǎng)站出現(xiàn)，如： http://www.iconfont.cn ，那都不是事了。再加上 css 的自定義字體的兼容性非常好，Iconfont 迅速開始流行起來(lái)。以這個(gè)站為例，大概看下使用方法：

在 Iconfont 中創(chuàng)建自己的項(xiàng)目，將需要使用的圖標(biāo)添加到自己的項(xiàng)目中。

復(fù)制出 Unicode 或 Font class

全部代碼如下

@font-face {
  font-family: "iconfont";  /* project id 38792 */
  src: url("http://at.alicdn.com/t/font_1444792316_9706304.eot");
  src: url("http://at.alicdn.com/t/font_1444792316_9706304.eot?#iefix") format("embedded-opentype"),
  url("http://at.alicdn.com/t/font_1444792316_9706304.woff") format("woff"),
  url("http://at.alicdn.com/t/font_1444792316_9706304.ttf") format("truetype"),
  url("http://at.alicdn.com/t/font_1444792316_9706304.svg#iconfont") format("svg");
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tishi:before { content: "e600"; }

這里有demo

在實(shí)際開發(fā)中，我們會(huì)把常用的一些圖標(biāo)封裝成組件，直接使用。像這樣

Iconfont 用起來(lái)挺方便的，而且兼容性也十分的好，大小、顏色可隨意改變。

但它仍有缺陷：

字體需要加載資源

有時(shí)候可能會(huì)出現(xiàn)鋸齒

只能被渲染成單色或者css3的漸變色

所以我們要繼續(xù)進(jìn)化。

使用 svg ，這里所謂的進(jìn)化并不是 svg 本身的進(jìn)化，因?yàn)?svg 并不晚于 Iconfont。只是環(huán)境（兼容性）的原因?qū)е滤鼰o(wú)用武之地。就像最近火的一塌糊涂的 AI, 其實(shí)最早在 1956 年就提出了。隨著外界因素的進(jìn)化，IE6/7/8 的淘汰， android 4.x 的開始，svg 的機(jī)會(huì)變到來(lái)了。先看下兼容性：

保存成文件

需要請(qǐng)求加載資源

inline 方式

在 html 一坨坨，很麻煩

symbol

適合我們做組件

The  element is used to define graphical template objects which can be instantiated by a  element.

通過(guò) 定義的 svg 模板，我們可以使用 來(lái)加載它。

那么 是怎么來(lái)的呢？

同樣，在這個(gè)構(gòu)建工具十分發(fā)達(dá)的時(shí)刻。
最開始我們使用了 gulp-svg-symbols，它可以將指定目錄中的 svg 自動(dòng)合并到一個(gè) svg 文件中，文件里包括了所有 icon 的 symbol 模板，然后再將這個(gè)模板將其隱藏放到 index.html 中。

但是這個(gè)庫(kù)有個(gè)坑點(diǎn)是它依賴了一個(gè) Unicode 的包，這個(gè)包在國(guó)內(nèi)安裝炒雞慢，于是我們棄用了它，使用了gulp-svgstore

按照這種方式我們成功的開發(fā)一 salt-icon 這個(gè)組件，里面包括了一些常用的 icon。使用方式：

這樣我們?cè)?mobile 端用 svg 替代了 Iconfont，解決了上述 Iconfont 提到的問(wèn)題。

但是很快我們就發(fā)現(xiàn)，在 index.html 中引入那一坨 symbol 模板是極其惡心的。

隨著 webpack 打包的成熟，各種 loader，我們將那一坨 symbol 模板直接打包成一個(gè) salt-icon-source.js 文件，在這個(gè)文件中將其 append 到 body 上。

同時(shí)發(fā)現(xiàn)了上述提到的 iconfont 網(wǎng)站也支持直接導(dǎo)出 symbol 文件。

import React from "react";
import ReactDOM from "react-dom";
import IconSource from "./svg/salt-icon-symbols.svg";


const WRAPPER_ID = "__SaltIconSymbols__";
const doc = document;
let wrapper = doc.getElementById(WRAPPER_ID);
if (!wrapper) {
  wrapper = doc.createElement("div");
  wrapper.id = WRAPPER_ID;
  wrapper.style.display = "none";
  doc.body.appendChild(wrapper);
  ReactDOM.render(, wrapper);
}

這樣雖然解決了引入模板的那個(gè)問(wèn)題，但是后面又發(fā)現(xiàn)的 symbol 在安卓 4.3.x 下無(wú)法顯示，也就是說(shuō) symbol 的兼容性并沒(méi)有直接使用 svg 好。

然后我們通過(guò)使用一個(gè)叫 svg4everybody 的庫(kù)，解決了上述兼容性問(wèn)題。（它的原理是如果發(fā)現(xiàn)不支持 symbol 的，它會(huì)通過(guò) xlink:href 拿到 svg 的資源，然后動(dòng)態(tài)創(chuàng)建一個(gè) svg,插入到當(dāng)前位置）

雖然解決了兼容性的問(wèn)題，但是我們深深的感覺(jué)到了這種方式的不優(yōu)雅。

講的這里，可能會(huì)有人會(huì)有疑問(wèn)，既然已經(jīng)有 svg-react-loader 了，為什么不直接 import svg 文件？

業(yè)務(wù)中使用的圖片當(dāng)然可以直接 import 加載，但一些通過(guò)的圖標(biāo)我們希望是能統(tǒng)一起來(lái)，做出組件，更方便的使用。

而且我們組件中還會(huì)對(duì) svg 處理了它事件不能冒泡的問(wèn)題，也就是在某些低版本的安卓機(jī)上，svg 圖標(biāo)是無(wú)法點(diǎn)擊的。解決方案有兩種：

貼膜，不過(guò)這樣會(huì)導(dǎo)致多一層結(jié)構(gòu)嵌套

去掉事件

svg {
  pointer-events: none;
}

不過(guò)，這個(gè)問(wèn)題可以給我?guī)?lái)啟示，‘既然已經(jīng)有 svg-react-loader 了’，那么 svg-loader 里做了什么呢？symbol 的方式或許真的可以淘汰了。

看下 svg-react-loader 的實(shí)現(xiàn)
首先有一個(gè)模板

  render () {
    const props = this.props;
      return (
        
      );
    }

然后有一個(gè) sanitize.js ，會(huì)對(duì) svg 做一些處理，加上標(biāo)準(zhǔn)的 xml namespace, 把 React 特有的屬性 class / for 轉(zhuǎn)化為 className / htmlFor, 把屬性名轉(zhuǎn)化為駝峰。

最后根據(jù)模板生成這樣一段代碼

var React = require("react");

module.exports = React.createClass({

    displayName: "Test",

    getDefaultProps () {
        return {"width":"1024","height":"1024","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"};
    },

    render () {
        var props = this.props;

        return ;
    }
});"

這樣的代碼我們就可以直接在 react 中直接使用了。

所以我們的組件借助這樣的思想，完全棄用了 symbol 模式。

我們先掃描對(duì)應(yīng)的 svg 文件，將其按上面的思路生成一個(gè)個(gè)多帶帶的 js 文件。
在組件層面可以再封裝一層，統(tǒng)一引入，提供一個(gè)通用的調(diào)用方式，和上面一樣。

更好的是你也可以多帶帶引用每一個(gè)文件，減小使用體積。

最后我們憧憬一下，隨著 react 15.x 的發(fā)布，react 對(duì) svg 的支持越來(lái)越好了，隨著 IE 8 也即將被遺棄，我們的 PC 端也有望從 Iconfont 轉(zhuǎn)換到 svg 了。