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

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

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

使用方式：

• 訪問在線網站：http://iconpark.bytedance.com/official

• 在線配置->填充模式->選擇圖標大小32號，填充風格，綠色背景等->拷貝代碼->復制代碼

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

• 參考配置

• 多種圖標類型只需改變theme屬性

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。