關于圖標icon

微信小程序中的 icon 組件只有 9 種類型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。
只有9個類型的圖標往往是不夠的，需要拓展更多的icon組件圖標。

第一種方案 直接使用圖片（簡單粗暴）

缺點:

圖片在文本里面不方便布局；

圖片不方便修改顏色；

圖片不能伸縮，放大之后會變模糊，不美觀；

圖片需要在本地或者網絡上存儲，使用起來不如圖標一個名稱方便；

如果圖標太多，產生大量大HTTP請求；

第二種方案 使用精靈圖Sprite

精靈圖是以非重疊、最小化分布的方式排列成一張圖片，加載的時候只加載一次，減少HTTP請求

第三種方案 使用CSS樣式繪制

缺點

工作量大；

繪制時，需要統一一個中心點，否則控制位置比較麻煩；

不方便控制大小、顏色；

第四種方案 使用矢量字體（最簡單有效）

矢量字體分為三類

• Adobe 的 Type1
• Apple 和 Microsoft 主導的 TrueType
• Adobe Apple Microsoft 共同主導的開源字體 OpenType

阿里巴巴的圖標網站 ： Iconfont-阿里巴巴矢量圖標庫
提供常用圖標下載，還提供自定義矢量圖標字體的生成與下載

第五種方案 使用矢量SVG文件

SVG（Scalable Vector Graphics）是基于 XML 的一種矢量圖形格式，它即可以作為單獨的圖形文件使用也可以嵌入到網頁中并由 JavaScript 來操作，非常方便和靈活。

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 用來定義用于網絡的基于矢量的圖形
• SVG 使用XML 格式定義圖形 SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
• SVG 是萬維網聯盟的標準
• SVG 與諸如 DOM 和XSL 之類的 W3C 標準是一個整體

總結

以上是生活随笔為你收集整理的关于微信小程序图标icon的五种实现方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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