繼阿里的iconfont之后，字節(jié)跳動也出品了自己的矢量圖標(biāo)庫，可以實現(xiàn)根據(jù)單一SVG源文件變換出多種主題， 具備豐富的分類、更輕量的代碼和更靈活的使用場景。

矢量SVG圖標(biāo)的出現(xiàn)，完全改變了前端的開發(fā)方式，之前總是通過設(shè)計切圖，然后合并成雪碧圖（sprite），通過CSS引入背景定位的方式，不僅要寫一堆的css代碼，而且拓展靈活性不強，如果要改變圖標(biāo)的顏色和大小，又得重新做圖，重復(fù)以上的步驟。

有了svg就方便多了，輕松地通過font-size和color來改變大小和顏色，一處引用，處處可用。并且是高質(zhì)量的圖，免去了使用2x和3x圖的煩惱。

使用方式：

• 訪問在線網(wǎng)站：http://iconpark.bytedance.com/official

• 在線配置->填充模式->選擇圖標(biāo)大小32號，填充風(fēng)格，綠色背景等->拷貝代碼->復(fù)制代碼

// 引用 import {CheckOne} from '@icon-park/vue' // 調(diào)用 <check-one theme="filled" size="32" fill="#17bd08"/>

• 參考配置

• 多種圖標(biāo)類型只需改變theme屬性

對開發(fā)者友好，還針對不同的技術(shù)棧提供了不同的代碼庫，滿足React/Vue/SVG/m移動端/小程序等多種開發(fā)場景使用：

GitHub：https://github.com/bytedance/IconPark

下載React包：NPM地址?https://www.npmjs.com/package/@icon-park/react

下載Vue包：NPM地址??https://www.npmjs.com/package/@icon-park/vue

下載Vue3包：NPM地址?https://www.npmjs.com/package/@icon-park/vue-next

下載SVG包：NPM地址??https://www.npmjs.com/package/@icon-park/svg

總結(jié)

以上是生活随笔為你收集整理的SVG格式的Icon，用了你就知道有多香的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。