前言
之前一直用 image 的方式使用 svg婴栽，后來(lái)，改把 svg 上傳到阿里巴巴的 iconfont-阿里巴巴矢量圖標(biāo)庫(kù) 使用簸淀。
前段時(shí)間，iconfont 出問(wèn)題了幔烛，不支持上傳 svg啃擦，也不支持生成 cdn 了囊蓝，只能下載到本地使用饿悬。
后來(lái)，嘗試使用了一下本地使用的方式聚霜，還是太麻煩狡恬，最主要，已經(jīng)沒法上傳自己的 svg 了蝎宇，還不利于團(tuán)隊(duì)協(xié)作弟劲，太不友好了。
于是研究了一下姥芥，才發(fā)現(xiàn)兔乞，原來(lái)早就有更好的實(shí)現(xiàn)方式了，可以完全不依賴 iconfont 生成的資源來(lái)運(yùn)作。
閱讀文檔
說(shuō)實(shí)話庸追，有些細(xì)節(jié)霍骄，如果不是自己慢慢摸索，很難在一開始就發(fā)現(xiàn)淡溯。
其實(shí)解決問(wèn)題的方案读整，老早就躍然紙上，只是之前已經(jīng)錯(cuò)過(guò)了很多次了咱娶。
使用一項(xiàng)新技術(shù)米间、新框架的時(shí)候，我想膘侮，很多人都沒有耐心從頭到尾屈糊，詳細(xì)的看一遍官方文檔。
我稍微總結(jié)了一下琼了，原因大概有幾點(diǎn)：
- 官方文檔寫得太晦澀難懂了另玖，術(shù)語(yǔ)用的太專業(yè)，看起來(lái)太過(guò)于無(wú)聊表伦，浪費(fèi)時(shí)間
- 沒有中文文檔谦去，對(duì)于英語(yǔ)閱讀能力不好的童鞋，看起來(lái)太吃力
- 基礎(chǔ)不行蹦哼，看起來(lái)太過(guò)吃力鳄哭，即使耐心的看完，也是云里霧里纲熏，完全不能理解
- 不知道合適的應(yīng)用場(chǎng)景妆丘，看了也不清楚該怎么用，前面看后面就忘記了局劲，不如當(dāng)作工具書來(lái)用
- 官方文檔寫的太差勺拣，不值得一看，不如直接閱讀源碼
我想鱼填，筆者總結(jié)的這幾點(diǎn)药有，大部分人在某些情況下，應(yīng)該都能對(duì)號(hào)入座苹丸。
不看官方文檔愤惰，也不能說(shuō)一定不好，但是赘理，相信我宦言，大部分官方文檔看了總比不看要好。
試想想商模，還能有誰(shuí)比技術(shù)奠旺、框架的作者更了解產(chǎn)品本身呢蜘澜？
The devil is in the details
按照個(gè)人的經(jīng)驗(yàn)來(lái)說(shuō)，也許很多困擾你已久的問(wèn)題响疚，可能就藏在官方文檔的某個(gè)不起眼的角落里面兼都，等待著你去發(fā)掘呢。
歷程
我一直認(rèn)為稽寒，寫技術(shù)文章扮碧，如果只專注于寫技術(shù)本身，其實(shí)并沒有多大的參考價(jià)值杏糙。那就如同一本流水賬一樣慎王，和藏在官方文檔的某個(gè)角落里，和藏在叫教科書的某個(gè)章節(jié)里沒啥區(qū)別宏侍。
如果是那樣赖淤，與其叫文章，倒不如叫摘抄谅河。
比如在我決定花時(shí)間去研究下咱旱，如何替換 iconfont 之后，我就在找有什么合適的技術(shù)方案绷耍。
首先第一步吐限，肯定是羅列一些不能直擊核心本質(zhì)的關(guān)鍵字，在搜索引擎檢索一番褂始。
依照以往的經(jīng)驗(yàn)來(lái)看诸典，這多半是找不到合適的答案的。在沒有理解透徹問(wèn)題的本質(zhì)之前崎苗，很難一下子就抓住關(guān)鍵要素狐粱。
后來(lái)我一想，之前用上 iconfont 也是因?yàn)榈ㄊ?antd 里的文檔看到使用推薦肌蜻，那有沒有別的方式呢？
別說(shuō)必尼，還真有蒋搜。
從文檔中可以看出，有一個(gè) svgr 插件胰伍，是支持以 react component 的方式齿诞，引入 svg 圖片的。
打開官網(wǎng)的開始使用頁(yè)面： Getting started - SVGR
可以看到骂租，有在 webpack 里使用的教程。
又是對(duì)著文檔一番折騰斑司，最后發(fā)現(xiàn)渗饮，仍舊是使用失敗但汞。
當(dāng)然這里有一個(gè)前提是，我的項(xiàng)目之前是直接使用 create-react-app 創(chuàng)建的互站，你如果直接用 webpack 從零開始配置的項(xiàng)目私蕾，按照教程里用肯定是沒問(wèn)題的。
用過(guò) create-react-app 的童鞋應(yīng)該知道胡桃，官方提供的腳手架非常的好用踩叭，但是其內(nèi)部的 webpack 相關(guān)配置隱藏的太好了，不方便更改翠胰。
為了項(xiàng)目的簡(jiǎn)介性容贝，我不想將所有的配置 eject 出來(lái)，因?yàn)檫@個(gè)過(guò)程是不可逆的之景。
還好有個(gè)比較好的修改方案斤富，就是使用 GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app 插件。
照著 svgr 官方文檔的配置方式锻狗，再結(jié)合 craco 的修改默認(rèn) webpack 配置的方案满力，成功加載了插件，但是仍舊無(wú)法使用轻纪。
正所謂油额，“山重水復(fù)疑無(wú)路，柳暗花明又一村”刻帚。
正在我一籌莫展悔耘，苦惱不已的時(shí)候，卻在 create-react-app 的官方文檔有了新的發(fā)現(xiàn)：Adding Images, Fonts, and Files | Create React App
在 react-scripts@2.0.0 和 react@16.3.0 版本開始我擂，直接就支持以 ReactComponent 的方式導(dǎo)入 SVG 了衬以。
看到這里，真是一口老血要?dú)獾膰姵鰜?lái)了校摩。
真可謂是看峻，“眾里尋他千百度，驀然回首衙吩，那人卻在燈火闌珊處”互妓。
趕緊一頓還原操作，配合著 antd 的 Icon 組件坤塞，順利的用上了 ReactComponent 形式的 SVG 了冯勉。
從此再也不用受制于 iconfont 了。
不過(guò)需要注意的是摹芙，如果你的 svg 里設(shè)置了顏色屬性灼狰，如下面所示的話，那么最好給它刪除掉以后再用浮禾，否則 svg 里圖元的樣式不能自動(dòng)繼承父元素的樣式交胚，處理起來(lái)較為麻煩份汗。
總結(jié)
說(shuō)來(lái)慚愧，如果不是因?yàn)?iconfont 出了這岔子問(wèn)題蝴簇，筆者也不會(huì)有興趣研究這個(gè)問(wèn)題杯活，那么也就不會(huì)發(fā)現(xiàn)，原來(lái)在 react 中用 svg 還有這么舒服的使用方式熬词。
通過(guò)研究這個(gè)問(wèn)題旁钧，至少是給我自己敲響了一些警鐘。有時(shí)候互拾，發(fā)現(xiàn)問(wèn)題歪今，官網(wǎng)文檔、官方論壇往往能幫助你解決大部分問(wèn)題摩幔，耐心的研究過(guò)后彤委，如果還是不能解決，在尋求別的方案或衡，才是上策焦影。
