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.js
to your/config/www/
directory - Enable advanced mode to register resources
- Add
/local/number-icons.js
as a custom resource
Everywhere that you can use an icon, you can use num:
prefix to get a number. Or deg:
to get the number with a degrees symbol. Examples:
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-svg
You can generate your own number icons with npm run generate
.