Weather icons for OpenWeathermap in a Dashboard 2 template

Share Your Projects
2

A much larger set of icons - 120 of them - is available at https://github.com/rickellis/SVG-Weather-Icons/Masters-Tempestacons. These have descriptive rather than numeric filenames so I'd have to build a cross reference between OWM's codes and these filenames.

I downloaded these to icons_tempestacon and wrote a little bash script to generate part of a ui-template to show them

#! /usr/bin/bash
DIR=`basename $(pwd)`

printf "%s\n" '<div class="dashboard-container" :style="{ backgroundColor: msg.color}">'
printf "%s\n" '<div class="daily-row">'
for f in $(ls *.svg)
do
printf "%s(\'/%s/%s\')%s%s%s\n" '<div class="icon-wrapper"><div class="weather-icon" style="--icon:url' $DIR $f ';"></div><div class="icon-label">'$(basename $f .svg) '</div></div>'
done
printf "%s\n%s\n" '</div>' '</div>'

And after grouping the icons into multiple lines in the template, this is what I get

image
image1842×1332 412 KB

Rick Ellis has other weather icon sets too, not sure how many icons are not also in the Tempestacon set. By all means download them to find out!

1 Like