關(guān)于icon,svg的痛點：
- 項目前端開發(fā)過程中，設(shè)計不可能一次性把所有的icon都給到炎疆，每次來一張新的圖片卡骂，就要加進(jìn)
assets文件夾里
- 需求隔三差五更新迭代，設(shè)計稿一改再改形入，icon變來變?nèi)ィ????????????????????....
- 對于svg圖片全跨，引入用
img標(biāo)簽，沒辦法簡單方便的根據(jù)交互變化(如鼠標(biāo)懸停亿遂、按鈕點擊浓若、超鏈接激活狀態(tài)hover，click蛇数，active)改變顏色挪钓、大小等css樣式
中原土法加svg/icon直通車??????：
- svg文件用在html里
<img/>的使用方式：
<img src="../../../assets/images/question.svg" alt="">
顏色大小小想變就變？ -- 呵呵噠....
請開始你的表演
用了咱的方法耳舅，上項目效果圖碌上，杠杠的Ｒ衅馈：
按照下面的步驟走，項目一次性導(dǎo)入多個icon馏予，一鍵生成自己的icon圖標(biāo)庫天梧，支持增刪改icon
1. 這是設(shè)計師給的一堆svg圖表(????????????????...)
&@##$$%%^^.....
設(shè)計給的svg
2. 點擊進(jìn)入icomoon傳送帶
-
icomoon
其他icon生成網(wǎng)站：如iconfont，fontawesome等霞丧，同類型產(chǎn)品旗鼓相當(dāng)呢岗，咱不展開講了，以icomoon為例
3. 給自己的icon圖標(biāo)庫起個名字唄
22222.png
4. 選中你要的svg們
注意?
-
選中狀態(tài)為橙色邊框
4. 編輯你的icon庫蛹尝，如初始顏色后豫，class名(也可以用默認(rèn)的)
- 點擊右下方的Generate Font
注意? - 下面紅框里可以點擊進(jìn)行特定的icon編輯
5. 下載并文件放在自己的項目里
- 點擊右下角的download
-
解壓后的樣子，并將這四個文件放在自己的項目的對應(yīng)assets的fonts文件夾里
- 把文件里的
style.css的內(nèi)容拷貝到自己項目對應(yīng)的css文件突那，里面表識了font-face挫酿，icon的class以及css等信息
想一次性導(dǎo)入之前的svgs，然后添加/刪除一些新的svg到自己的圖標(biāo)庫
- 當(dāng)前項目里點擊左上角
Import Icons,導(dǎo)入之前download的文件里的selection.json文件
-
selection.json有之前已經(jīng)保存的icon信息陨收，導(dǎo)入之后自動識別為各個svg饭豹，然后再點擊import icons在此基礎(chǔ)上進(jìn)行新的icon
代碼：
注意??
- 咱用的scss
<div>
<span class="icon-info"></span>
<i class="icon-help"></i>
</div>
@import 'variables';
.icon-help {
&::before {
font-size: 64px;
}
&:hover {
&::before {
color: #E98B23;
transition: color 1s ease;
}
}
}
GIF：
