antd圖標的本地化使用

antd圖標的本地化使用

使用antd開發的前端，項目遷移到內網之後，antd圖標失效。致使分頁的"<"和">"、<Icon/>、<Avatar/> 等標籤均失效

解決方法：

1. 下載iconfont，即antd的圖標文件。連接：https://github.com/ant-design...
2. 我使用create-react-app創建的項目，npm run build 後生成indext.html、static文件夾（包含css、js）。
3. 在index.html的同級目錄下保存下載的文件夾(iconfont)。
4. 默認狀況下，用到icon時會到阿里的cdn去取，內網環境時取字體失敗。
5. 修改npm run build 生成的js文件：用"/iconfont/iconfont"替換原始的"https://ali**"。

tips：

1. 經過chrome調試時發現，原始的請求iconfont的地址是：https://ali***.woff或者https://ali***.eot等地址
2. 替換時只需替換前邊的部分，如"https://ali***.woff"替換爲"/iconfont/iconfont.woff",因此實際替換時，只需替換："https://ali***"爲"/iconfont/iconfont"。這2個iconfont，第一個表示是iconfont文件夾，第二個實際上是文件名的一部分，由於下載下來的字體文件都默認命名爲iconfont.***，如iconfont.woff、iconfont.eot等。
3. 以上只適合於不跨域的狀況。

後記

其實關鍵的問題就是修改取字體的地址，網上有其餘人使用修改webpack.config的方法，道理相同。只是本人太菜，沒測試成功。這個方法只是權宜之計，要從根本解決，仍是需參照其餘攻略。