Se volete personalizzare le vostre entity su Home Assistant e non trovate l'icona giusta su MaterialDesignIcon siete nel posto giusto!
Questo è un piccolo esempio del risultato:
Ecco in breve i passi da seguire per creare il prorio set di icone da inserire su Home Assistant:
Occorrente:
- Le icone che vuoi inserire in formato .svg
- Lo script generate.py che creeremo di seguito
Prima di cominciare!
Copiamo il seguente codice in un editor di testo e salviamolo come "generate.py".
import os
def make_file(directory, name, out):
out.write('async function getIcon(name) {\n\n')
for f in os.listdir(directory):
if not f.endswith('.svg'):
continue
with open(os.path.join(directory, f), 'r') as fp:
name = os.path.splitext(f)[0]
data = fp.read()
start = data.find('<path')
end = data.find('></path')
out.write(' if (name === "{0}")'.format(name) + ' {\n return {\n path: ' + data[start+8:end+0] + ',\n };\n }\n\n')
out.write('\n}\n\nwindow.customIconsets = window.customIconsets || {};\nwindow.customIconsets["svg"] = getIcon;')
with open("svg_icons.js", 'w') as out:
make_file('.', 'svg', out)
Iniziamo!
- Raccogli tutte le icone che vuoi in una cartella.
- Vai su IcoMoon.io.
- Clicca su "Import icons" e carica tutte le icone raccolte al punto 1.
- Cliccate su tutte le icone appena comparse per selezionarle.
- Andate su "Generate SVG & More" e subito dopo l'ingranaggio accanto a "Download".
- Attivate "Override size" e impostate i pixel su 24, e avviate il download.
- Aprite il file "icomoon.zip" appena scaricato e copiate il contenuto della cartella "SVG" dentro la cartella "\config\www" di Home Assistant (la cartella config è quella dove si trova il file configuration.yaml).
- Sempre nella stessa cartella copiate il file "generate.py" in allegato.
- Se volete, rinominate i file .svg, il nome sarà quello che userete nella configurazione di HA.
- Avviate lo script (è necessario che python sia installato sul vostro pc) e vi ritroverete un file chiamato "svg_icons.js".
- Su HA, andate su Impostazioni, Plance di Lovelace, Risorse e aggiungete il seguente url
/local/SVG/svg_icons.jscome Modulo Javascript e riavviate HA.
- A questo punto potrete utilizzare le vostre icone proprio come quelle di MaterialDesignIcon solo che al posto di "mdi:nome-icona" dovrete scrivere "svg:nome-icona".
NB. Se volessi creare più iconset separati basta solo porre alcune modifiche al processo:
- Nel codice del file "generate.py" verso la fine sostituire "customIconsets[svg]" con "customIconsets[il codice che vuoi]" per modificare il prefisso "svg:nome-icona" in quello che vuoi.
- Raggruppare le icone in una cartella "Nome cartella" e modificare il percorso nel punto 11 in "/local/Nome cartella/svg_icons.js".
UNIAMO LE FORZE!
Ho creato una cartella condivisa su Google Drive.
Chiunque voglia partecipare è ben accetto.
RINGRAZIAMENTI:
thomasloven
SDeSalve
Gianpi
