Adds SVG icons based on numbers for Home Assistant. These can be used for setting or showing temperatures within Home Assistant.
- Add this repo as custom repo to HACS
- Install this component
- Copy the
number-icons.jsto your/config/www/directory - Enable advanced mode to register resources
- Add
/local/number-icons.jsas a custom resource
Everywhere that you can use an icon, you can use:
num:-prefix to get numbers. Ranging from 0-100 with steps of 1.deg:-prefix to get numbers with a degree symbol and a decimal. Ranging from 4-75 with steps of 0.5.ndg:-prefix to get numbers with a degree symbol without decimals. Ranging from 4-75 with steps of 1.
An example:
I also tend to combine this with card-mod to get a better view of the temperature. A full example:
type: tile
entity: climate.bathroom
card_mod:
style:
.: |
{%- set is_heating = states(config.entity) != 'off' -%}
:host {
--card-mod-icon: deg:{{ iif(is_heating, state_attr(config.entity, 'temperature'), 'off') }}
}
ha-tile-icon { --mdc-icon-size: 40px; }
ha-tile-icon$: |
.shape {
width: unset!important;
height: unset!important;
overflow: visible!important;
}
.shape::before {--tile-icon-color: transparent;}which yields me with:
This will set the current temperature as an icon, the same way Apple does this with Homekit.
# Install all dependencies
npm install
# Re-install text-to-svg from master
rm -rf node_modules/text-to-svg
git clone --depth=1 https://github.com/congpeijun/text-to-svg.git -b congpeijun-patch-1 node_modules/text-to-svg
npm install --prefix node_modules/text-to-svg
npm run build --prefix node_modules/text-to-svgYou can generate your own number icons with npm run generate.