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

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

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

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

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

所以對于這種方式我們只能緬懷。

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

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

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

復(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

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

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

但它仍有缺陷：

字體需要加載資源

有時候可能會出現(xiàn)鋸齒

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

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

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

保存成文件

需要請求加載資源

inline 方式

在 html 一坨坨，很麻煩

symbol

適合我們做組件

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

通過 定義的 svg 模板，我們可以使用 來加載它。

那么 是怎么來的呢？

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

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

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

這樣我們在 mobile 端用 svg 替代了 Iconfont，解決了上述 Iconfont 提到的問題。

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

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

同時發(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);
}

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

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

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

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

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

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

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

去掉事件

svg {
  pointer-events: none;
}

不過，這個問題可以給我?guī)韱⑹荆热灰呀?jīng)有 svg-react-loader 了’，那么 svg-loader 里做了什么呢？symbol 的方式或許真的可以淘汰了。

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

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

然后有一個 sanitize.js ，會對 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 模式。

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

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

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