關(guān)于icon,svg的痛點(diǎn)：

1. 項(xiàng)目前端開發(fā)過程中，設(shè)計(jì)不可能一次性把所有的icon都給到，每次來一張新的圖片，就要加進(jìn)assets文件夾里

2. 需求隔三差五更新迭代，設(shè)計(jì)稿一改再改，icon變來變?nèi)ィ????????????????????....

3. 對于svg圖片，引入用img標(biāo)簽，沒辦法簡單方便的根據(jù)交互變化(如鼠標(biāo)懸停、按鈕點(diǎn)擊、超鏈接激活狀態(tài)hover， click， active)改變顏色、大小等css樣式

中原土法加svg/icon直通車??????：

• svg文件用在html里<img/>的使用方式：

  <img src="../../../assets/images/question.svg" alt="">

顏色大小小想變就變？ -- 呵呵噠....

請開始你的表演

用了咱的方法，上項(xiàng)目效果圖，杠杠的?。?/h3>

---

按照下面的步驟走，項(xiàng)目一次性導(dǎo)入多個(gè)icon，一鍵生成自己的icon圖標(biāo)庫，支持增刪改icon

1. 這是設(shè)計(jì)師給的一堆svg圖表(????????????????...)

&@##$$%%^^.....

設(shè)計(jì)給的svg

2. 點(diǎn)擊進(jìn)入icomoon傳送帶

1. icomoon
   其他icon生成網(wǎng)站：如iconfont，fontawesome等，同類型產(chǎn)品旗鼓相當(dāng)，咱不展開講了，以icomoon為例

3. 給自己的icon圖標(biāo)庫起個(gè)名字唄

22222.png

4. 選中你要的svg們

注意?

• 選中狀態(tài)為橙色邊框

  
  

4. 編輯你的icon庫，如初始顏色，class名(也可以用默認(rèn)的)

• 點(diǎn)擊右下方的Generate Font
  注意?
• 下面紅框里可以點(diǎn)擊進(jìn)行特定的icon編輯

5. 下載并文件放在自己的項(xiàng)目里

• 點(diǎn)擊右下角的download

• 解壓后的樣子，并將這四個(gè)文件放在自己的項(xiàng)目的對應(yīng)assets的fonts文件夾里

  
  
• 把文件里的style.css的內(nèi)容拷貝到自己項(xiàng)目對應(yīng)的css文件，里面表識了font-face，icon的class以及css等信息
  

想一次性導(dǎo)入之前的svgs，然后添加/刪除一些新的svg到自己的圖標(biāo)庫

• 當(dāng)前項(xiàng)目里點(diǎn)擊左上角Import Icons,導(dǎo)入之前download的文件里的selection.json文件

• selection.json有之前已經(jīng)保存的icon信息，導(dǎo)入之后自動(dòng)識別為各個(gè)svg，然后再點(diǎn)擊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：