大家好，歡迎來到程式視點！我是小二哥！
今天再給大家分享一款免費開源、高效能的圖示庫：Ionicons
它適用於web、APP和桌面應用。
關於 ![Ionicons]
Ionicons 是一個國外知名混合開發框架 Ionic Framework 內建的圖示庫。 它包含 1300 個為 Web、iOS、Android 和桌面應用程式專門定製的圖示。
同時 Ionicons 這套圖示庫是一個獨立的專案，完全可以單獨使用。
Ionicons 亮點盤點
-
包含1300+個、圖示，能滿足大多數的業務場景
-
具有高效能的按需載入機制，只載入需要的圖示資源，無需手動配置
-
提供filled、outline、sharp 三種不同風格的變體，型別豐富
開發上手
安裝
在自己專案中使用 Ionicons 這套圖示庫，只需要引入 script 標籤即可：
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
圖示使用
給 <ion-icon /> 標籤設定對應的 name 屬性即可：
<ion-icon name="heart"></ion-icon>
我們還可以用不同變體適合各種平臺：
< ion-icon name = "heart" > </ ion-icon > <!--filled--> < ion-icon name = "heart-outline" > </ ion-icon > <!--outline--> < ion-icon name = "heart-sharp" > </ ion-icon > <!--sharp-->
設定圖示大小和顏色：
<!-- 透過屬性設定圖示大小 --> <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> <!-- 透過css設定圖示大小和顏色 --> ion-icon { font-size: 64px; color: blue; }
自定義
可以使用外部SVG。在src屬性中提供外部SVG 檔案url地址。該src屬性的作用與<img src="...">請求影像的網頁訪問相同。 注意：外部檔案只能是有效的svg，並且不允許svg元素記憶體在指令碼或事件。
< ion-icon src = "/path/to/external/file.svg" > </ ion-icon >
二開使用
Ionicons 官網的右上角為設計師提供了所有圖示打包下載的功能，圖示原始檔格式為通用的 SVG 格式，滿足了設計師學習臨摹和二次修改的需求。
其他
Ionicons 的圖示數量不僅多，覆蓋也很全面。使用起來簡單、快捷、方便，自動按需載入的機制也讓開發者很省心。有興趣的小夥伴們，可以檢視下它的官網。
Ionicons官方文件 https://ionic.io/ionicons
寫在最後
【程式視點】助力打工人減負，從來不是說說而已！
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注，這樣就不會錯過之後的精彩內容啦！
如果這篇文章對你有幫助的話，別忘了【點贊】【分享】支援下哦~