大家好,歡迎來到程式視點!我是小二哥!
在專案開發過程中,圖示是永遠繞不開的話題。今天就和大家來聊一聊~
圖示庫現狀問題
-
圖示數量少
難以滿足產品專案需求的,或遇到缺失圖示的,往往還是需要設計師按所選圖示的風格自己繪製。
-
主要以單色的圖示為主
在日漸繁榮(要求越來越高)的UI設計領域,往往需要多色甚至是彩色的圖示來完成設計。
-
圖示庫大多為web 開發者服務
產品經理、運營專員、App 開發者、PPT 製作者等沒有設計基礎的同學使用仍需做轉換,使用不方便。
IconPark解決方案

圖示數量多,質量高,支援很高程度的自定義和多色彩主題,二次修改非常方便。
關於 IconPark
IconPark圖示庫是一個透過技術驅動向量圖示樣式的開源圖示庫; 可以實現根據單一SVG原始檔變換出多種主題; 具備豐富的分類、更輕量的程式碼和更靈活的使用場景; 致力於構建高質量、統一化、可定義的圖示資源,讓大多數人都能夠選擇適合自己的風格圖示。
優勢
-
提供超過2400+高質量圖示,分門別類,免費使用~

-
支援4種主題和線上換膚:線性、填充、雙色、四色風格 簡單便捷的自定義設定框

看我72變

-
支援多種便捷操作:複製SVG原始碼、複製React圖示元件、複製Vue圖示元件、下載PNG、下載SVG

-
針對技術同學,支援圖示元件程式碼包匯出, 包括React Icons、Vue3 Icons 、 SVG Icons
//React元件 <Config theme="multi-color" size="48" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/> //Vue元件 <config theme="multi-color" size="48" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/> //SVG標籤 <?xml version="1.0" encoding="UTF-8"?><svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g><rect width="48" height="48" fill="white" fill-opacity="0.01" stroke-linejoin="round" stroke-width="4" stroke="none" fill-rule="evenodd"/><g transform="translate(4.000000, 4.000000)"><polygon stroke="#333" fill="#2F88FF" points="20 1.74860126e-15 14 6 6 6 6 14 1.74860126e-15 20 6 26 6 34 14 34 20 40 26 34 34 34 34 26 40 20 34 14 34 6 26 6" stroke-linejoin="round" stroke-width="4" fill-rule="nonzero"/><circle stroke="#FFF" fill="#43CCF8" cx="20" cy="20" r="6" stroke-linejoin="round" stroke-width="4" fill-rule="nonzero"/></g></g></svg>
-
官網既是一個提供下載的網站,同時也是一個圖示設計、編輯和管理工具 針對不同的使用人群都非常友好,能極大地解決效率問題。

-
支援專案管理:登陸後,可以個性化上傳、管理圖示、及匯出圖示元件NPM包匯出


如此高質量的圖示庫,除了建議大家趕緊收藏使用,別的也沒啥說的了。祝大家搬磚快樂!
寫在最後
【程式視點】助力打工人減負,從來不是說說而已!
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注,這樣就不會錯過之後的精彩內容啦!
如果這篇文章對你有幫助的話,別忘了【點贊】【分享】支援下哦~群。