符號
所有
符號可以在視覺化的不同位置使用。因此,可以將其定義為變量或文本。
要在視覺化中輸出一個符號,可以通過標籤 [icon:SYMBOLPFAD] 直接在文本中聲明。符號路徑可以通過右鍵或使用 CTRL+C 從符號庫中複製。如果可能,應該只選擇 Material Symbols,以保持視覺化的風格一致。
符號庫
所有可用的符號都可以通過上下文菜單 視覺化 ▸
符號 輸入和搜索。也可以將自己的符號集導入庫中。該程序將在下面解釋。
注意事項: 顯示在符號列表上的名稱與符號路徑不相同。如果路徑中未指定符號集,則會自動使用 Glyphicons 集合。
符號庫中的篩選器也會搜索已存儲的標籤。如果不希望這種行為,可以通過以 = 開始篩選器來僅在名稱中搜索。
符號集 Material Symbols (預設)
此
符號集完全是動態的,符號的風格會根據視覺化的設計自動配置。此外,如果符號應該處於活動狀態,則會自動使用填充符號。但並非每個符號都有填充變體。
當按鈕半徑大於或等於 16 像素 時,符號會自動圓角。如果半徑等於 0px,則使用鋒利的符號。但在編輯器中始終使用普通符號。
注意事項: 建議使用符號集“Material Symbols”來統一設計視覺化。
符號集 Material Animated
有選定的
Material Symbols 被動畫化以表示值。這些符號僅有一個與
符號的
結構的動畫。選擇時,將釋放其他變量。
符號集 Philips Hue
Philips Hue 的符號可以自由使用,如果使用 Hue 介面。此外,還有一個來自 Home Assistant HASS 社區的額外 Hue 符號集。有關更多信息,請參見本章節末尾。
符號集 天氣
此符號集顯示視覺化中的天氣符號。這些符號由各種介面無縫支持。請參閱下文 天氣圖標。
符號集 Legacy (過時)
Legacy 符號集包含舊視覺化中的所有符號。新界面的顯示風格保持不變。不應再使用這些符號,因為它們未針對新界面進行優化。
各種舊符號仍然是動畫化的:
- legacy/door
- legacy/door_2
- legacy/lock
- legacy/shutter
- legacy/shutter_blinds
- legacy/window
- legacy/window_tilt
隱藏符號
視覺化中也有隱藏的符號。這些將在下文進一步解釋。
調用符號僅需 URL 前綴即可。
自定義符號集
可以將自己的
符號集導入項目。每個
符號集必須以 ZIP 文件準備好。可以下載一些示例數據:
專業技巧: 成功導入後,可以將符號集以 .antobj 格式導出,以簡化導入。要此操作,請右鍵點擊一個符號集並選擇
導出。
以下規則定義了
符號集的結構和要求。請仔細閱讀並嚴格遵守。
規則
- 前綴
- 只能包含 _、a–z 和 0–9。
- 大寫字母會自動轉換為小寫字母。
- 保留名稱如 sys、src 或 doc 無效。
- 必須以字母 (a–z) 開頭。僅允許數字。
- 後置下劃線 (_) 會被移除。
- 必須至少 3 個字符長。
- 多個下劃線 (__) 會被簡化為一個。
- 符號名稱
- 會自動轉換為小寫字母。
- 允許的字符是 -、_、a–z 和 0–9。
- 應避免過長的名稱和前綴。
- 一個前綴必須是唯一的,並且只能使用一次。
- 如果符號與系統符號具有相同的名稱和前綴,則可以替換它。
- 文件限制
- 清理後的最大文件大小:10 kB。較大的文件將被拒絕。
- SVG 文件必須是清理過的:
- 換行符會自動移除。
- 以下元素將被刪除:<title>、<desc>、<script>、<image>、<style>、<foreignObject>。
- 以下屬性將被刪除:style、fill、stroke、color、stop-color、flood-color、lighting-color。
- 包含嵌入式腳本、圖像、CSS 或外部資源的圖標將被拒絕。
- 如果樣式包含顏色或樣式塊,則導入也可能會被拒絕。
- SVG 標頭要求
- 必須包含:viewBox、width 和 height。如果可能,缺失的值將自動補充。
- 必須包含命名空間:xmlns="http://www.w3.org/2000/svg"。如果缺失或錯誤,則會自動補充。
- 圖標名稱必須與維度完全匹配,否則將拒絕該圖標。
- 維度必須是正方形的(寬度 = 高度)。預設值:24px。
- 應避免矛盾的樣式或不匹配的維度。
- 一般
- 製作不良的圖標可能會嚴重減慢顯示速度,甚至導致錯誤。
- 請務必注意符號的版權。
- 所有向量將被四捨五入到三位小數。
結構
- 文件 iconset.ini 是識別符號集所必需的。
- 它可以位於 ZIP 文件的根目錄或子目錄中。
- 必須以小寫形式存在 (iconset.ini)。
- 符號文件名本身不區分大小寫。
- 導入不會自動搜索 SVG 文件。
- 圖標文件夾必須在 iconset.ini 中明確定義(注意大小寫)。
- 在 ZIP 文件模板中定義了一個名為 icons/ 的文件夾。
- 子目錄
- 在定義的文件夾 (icons/) 中的子目錄用作類別。
- 符號名稱必須在所有類別中唯一。
- 符號文件夾中的命名規則:
- 最小值:僅維度和文件擴展名(例如 24.svg)。
- 變體如 filled24.svg 或 round_filled_24.svg 是有效的。
- 包含多個數字的文件名(例如 24_48.svg) 無效。
- 通過以下方式識別樣式變體:
- 填充:必須包含 filled 或 fill。
- 圓形:必須包含 round。
- 鋒利:必須包含 sharp。
- 圓形和鋒利不能相互結合。
- 如果多個規則適用,則使用最後識別的文件(選擇可能看起來是隨機的)。
- 其他規則
- 不會搜索嵌套子目錄(這些可以用於備份或原始文件)。
- 忽略沒有 .svg 的文件。
- 在符號文件夾中,可以放置一個名為 tags.txt 的文件以添加額外的標籤進行搜索。
特殊符號集
也有各種特殊的
符號集可以像自己的符號集一樣導入,但不需要按照上述規範配置。
Hass Hue 圖標
其中之一是來自 Gibhub 頁面 hass-hue-icons。這是 Home Assistant HASS 社區的額外 Hue 符號集,僅可用於非商業項目,因為它受 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 授權條款約束。因此,此符號集未隨 Antcas Control 一起提供。但是,可以隨時使用 ZIP 文件 hass-hue-icons-main.zip 作為新的符號集導入項目。請注意項目的 Github 網站上的許可條款。
來源: https://github.com/arallsopp/hass-hue-icons。
Pictogrammers 的 Material Design 圖標
另一個是來自 Pictogrammers 的。必須將文件 mdi-###.json 壓縮到 ZIP 文件中並導入。可以在瀏覽器的開發者控制台中找到該文件並下載它。嘗試將輪廓符號與填充符號結合使用。此庫幾乎與 Material Symbols 相同。但是,有許多社區擴展功能。如果您想將其他符號集整合到庫中,請隨時向我們詢問。
來源: https://pictogrammers.com/library/mdi/
子頁面