Add support for weather icon and add documentation

docs/badges/template.md

@@ -0,0 +1,46 @@
+# Template badge
+
+![Template light](../images/template-light.png)
+![Template dark](../images/template-dark.png)
+
+## Description
+
+A template badge allows you to build a custom badge. You can use `entity` as a variable for the entity set on the badge e.g. `{{ states(entity) }}`.
+
+> [!WARNING]  
+> Home Assistant **2024.8** is required to use custom badges
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                | Type            | Default  | Description                                                                                                                         |
+| :------------------ | :-------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`              | string          | Optional | Icon to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/) \*.                           |
+| `color`             | string          | Optional | Color to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                             |
+| `label`             | string          | Optional | Label to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                             |
+| `content`           | string          | Optional | Content to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                           |
+| `picture`           | string          | Optional | Picture to render. May contain [templates](https://www.home-assistant.io/docs/configuration/templating/).                           |
+| `tap_action`        | action          | `none`   | Home assistant action to perform on tap                                                                                             |
+| `hold_action`       | action          | `none`   | Home assistant action to perform on hold                                                                                            |
+| `double_tap_action` | action          | `none`   | Home assistant action to perform on double_tap                                                                                      |
+| `entity_id`         | `string` `list` | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities. |
+
+#### Notes
+
+\* You can render weather svg icons using [weather state](https://developers.home-assistant.io/docs/core/entity/weather/#recommended-values-for-state-and-condition) as icon :
+
+- weather-clear-night
+- weather-cloudy
+- weather-fog
+- weather-lightning
+- weather-lightning-rainy
+- weather-partlycloudy
+- weather-pouring
+- weather-rainy
+- weather-hail
+- weather-snowy
+- weather-snowy-rainy
+- weather-sunny
+- weather-windy
+- weather-windy-variant

src/badges/template/template-badge.ts

@@ -26,6 +26,8 @@ import { computeCssColor } from "../../ha/common/color/compute-color";
 import { registerCustomBadge } from "../../utils/custom-badges";
 import { TEMPLATE_BADGE_EDITOR_NAME, TEMPLATE_BADGE_NAME } from "./const";
 import { TemplateBadgeConfig } from "./template-badge-config";
+import { getWeatherSvgIcon } from "../../utils/icons/weather-icon";
+import { weatherSVGStyles } from "../../utils/weather";
 
 registerCustomBadge({
   type: TEMPLATE_BADGE_NAME,
@@ -204,17 +206,22 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
     const label = this.getValue("label");
     const picture = this.getValue("picture");
 
+    const hasContent = !!content;
+    const hasIcon = !!icon || !!picture;
+
     const style = {};
     if (color) {
       style["--badge-color"] = computeCssColor(color);
     }
 
+    const weatherSvg = getWeatherSvgIcon(icon);
+
     return html`
       <div
         style=${styleMap(style)}
         class="badge ${classMap({
-          "text-only": (!icon && !picture && content) ?? false,
-          "icon-only": (!content && (icon || picture)) ?? false,
+          "content-only": (!hasIcon && hasContent) ?? false,
+          "icon-only": (!hasContent && hasIcon) ?? false,
         })}"
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
@@ -227,11 +234,16 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         <ha-ripple .disabled=${!this.hasAction}></ha-ripple>
         ${picture
           ? html`<img src=${picture} aria-hidden="true" />`
-          : icon
-            ? html`
-                <ha-state-icon .hass=${this.hass} .icon=${icon}></ha-state-icon>
-              `
-            : nothing}
+          : weatherSvg
+            ? weatherSvg
+            : icon
+              ? html`
+                  <ha-state-icon
+                    .hass=${this.hass}
+                    .icon=${icon}
+                  ></ha-state-icon>
+                `
+              : nothing}
         ${content
           ? html`
               <span class="content">
@@ -332,6 +344,11 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         letter-spacing: 0.1px;
         color: var(--primary-text-color);
       }
+      svg {
+        width: var(--mdc-icon-size);
+        height: var(--mdc-icon-size);
+        display: flex;
+      }
       ha-state-icon {
         color: var(--badge-color);
         line-height: 0;
@@ -351,12 +368,13 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         margin-inline-start: -6px;
         margin-inline-end: initial;
       }
-      .badge.text-only .content {
+      .badge.content-only .content {
         padding-right: 4px;
         padding-left: 4px;
         padding-inline-end: 4px;
         padding-inline-start: 4px;
       }
+      ${weatherSVGStyles}
     `;
   }
 }