1 篇文章 含有標籤「圖標SVG」

在不斷演進的網站開發領域中，可縮放向量圖形（SVG）的運用已經經歷了一個顯著的轉變。這個旅程從傳統的 PNG 檔案使用到 SVG 精靈、網頁字型和 SVG 符號的整合，標誌著網頁設計和性能優化方面的重大進步。

傳統上，網站開發者依賴點陣圖形式的 PNG 檔案來將圖示整合到他們的項目中。雖然 PNG 檔案能夠完成其任務，但它們通常在可伸縮性和適應不同屏幕尺寸和解析度方面存在著限制。隨著網頁設計逐漸擁抱響應式和高清顯示，需要一種更靈活的解決方案變得顯而易見。

接著是 SVG 精靈。這種方法涉及將多個 SVG 圖示合併到單個文件中，減少了 HTTP 請求並簡化了加載過程。通過利用 CSS 技術，例如背景定位，開發人員可以根據需要輕鬆顯示單個圖示，增強了性能和可維護性。

網頁字型的出現帶來了圖示管理的另一個範式轉變。像 圖標font、Fontello 和 FontAwesome 這樣的服務提供了大量的可縮放向量圖示庫，打包成字型文件。通過將圖示視為文字元素，網頁字型提供了無與倫比的靈活性和可訪問性，使開發人員能夠無縫地將圖示整合到他們的項目中，同時利用文字特性，如顏色、大小和文字效果。

然而，隨著網絡項目的複雜化，管理圖示庫變得十分困難。

現有流行的圖示管理工具​

IcoMoon​

輕鬆管理您的圖示並將它們整合到您的專案中。 瀏覽免費圖示或匯入您自己的 SVG 圖示以匯出為圖示字體、SVG、PNG...

• 豐富的圖示庫： Icomoon 提供了一個廣泛且多樣化的圖示庫，滿足了各種設計需求。
• 自定義圖示集： 用戶可以上傳自己的 SVG 圖示，定制屬於自己的圖示集，增加了彈性和個性化。
• 線上臨時管理的專案/圖標 使用瀏覽器緩存
• 可編輯 SVG 轉向放大縮小
• 下載 SVG Symbols 並附上 PNG、SVG
• 付費: 提供雲端儲存功能
• 付費: 提供開發連結
• 付費: 提供 圖標font格式 (woff2.0)

圖標Font​

圖標font 是阿里媽媽MUX傾力打造的向量圖示管理、交流平台。 提供設計師將圖示上傳到 圖標font 平台，使用者可以自訂下載多種格式的圖標，平台也可將圖示轉換為字體，以便於前端工程師自由調整與呼叫。

• 豐富的圖示庫： 各種設計師上傳 圖標
• 自定義圖示集： 用戶可以上傳自己的 SVG 圖示，定制屬於自己的圖示集，增加了彈性和個性化。
• 可編輯 SVG 轉向放大縮小
• 下載 Unicode、圖標font格式 (woff2.0)、SVG Symbols
• 可協作管理 圖標

關於 Acrool 圖標庫 可以做些什麼​

因為 Acrool 主打的是協作工具，所以在圖標管理上，我們提供了 圖標 管理的功能有：

• 讓團隊協作管理圖標 (UIUX設計師上傳圖標, 前端工程師進行編輯與下載圖標 Symbols)，
• 自定義圖示集： 用戶可以上傳自己的 SVG 圖示，定制屬於自己的圖示集，增加了彈性和個性化。
• 可編輯 SVG 轉向放大縮小
• 下載 SVG Symbols、ReactJS 與 Flutter 可用的匯出格式。

並且 Acrool 也有提供對應的 React Lib: acrool-react-iconsvg，透過Typescript的安全型別ENUM更安全方便直接使用， 避免你的圖標遺失問題沒在編譯階段發現的問題

詳細使用方式可參考文件

圖標忽大忽小的問題​

由於 每次設計出來的圖標佔位並不相同，就會導致相同尺寸放在網頁上卻變成比較小，例如下圖：

所以我們會需要使用SVG編輯工具來調整大小，來將每個都調整成差不多的大小，這樣在網頁上就會比較一致。

圖標的命名​

圖標在命名上也是很重要的原則，他可以避免在使用上的混亂或者重複問題 (例如：你有上傳過，但你找不到以為沒有)， 另外也能幫助你在使用時可以快速的找到。

我認為在 FontAwesome 中的規則非常的好，所以很建議參考他們的命名方式，

這邊列出一些命名規則：

• arrow-down: 圖案+方向 (注意: 箭頭可能會搞混的是 angle/arrow)
• circle-arrow-down: 外面圓圈+箭頭+方向
• arrow-down-to-line: 箭頭+方向+到+線
• arrows-down-to-line: 箭頭+方向+到+線 (注意: 複數)
• arrow-down-from-arc: 箭頭+方向+從+弧

注意一下關鍵詞的優先度即可命名出90%一致性的命名。

總結​

不管使用哪個平台，只要預算允許的情況下，又能替您節省時間，提高效率，都是值得投資的。

如果有什麼在Acrool管理圖標庫上的需求，歡迎在聯絡我們告訴我們，我們會盡力滿足您的需求。