Remplacement des icônes Feather par Lucide

Apparemment il nous manque 25 icônes par rapport à la dernière version (4.29.0) mais pas vu de flocons non plus.

Y’a un fork de Feather qui existe Icons – Lucide
A voir si on peut l’integrer ou pas.

Y’a plus de choix dans ce fork
image

1 « J'aime »

je viens juste de tomber dessus et ça semble maintenu comparé à feather.
A voir effectivement si on peut remplacer feather par lucide sans (trop) de casse.

@pierre-gilles salut !
je suis en train de regarder le remplacement de Feather par Lucide.
J’ai vu sur ce post (qui date un peu) que ça ne te posait pas de problème particulier, est-ce toujours le cas ?
Maintenant Lucide a une webfont :

Si c’est bon, j’ai démarré le changement avec l’aide de Claude et j’ai besoin de tes lumières pour continuer dans le bon sens.
Mise à part la modification des noms des icônes qui peuvent différer (et donc script de migration), est-ce que l’on change la classe fe partout dans Gladys comme ci-dessous comme le suggère Claude, ou on modifie le minimum pour limiter l’impact (on garde les fe, on change juste les ref dans dashboard.css) ?

J’ai fait une migration complète pour être le plus propre possible sur le thème et sur Gladys, voici les PR :

En attente de checks et ajustements de ma part !

Replace feather by lucide by smuteau · Pull Request #4 · GladysAssistant/theme-optimized · GitHub
Replace Feather webfont by Lucide webfont by smuteau · Pull Request #2485 · GladysAssistant/Gladys · GitHub

J’ai aussi ajouté le fichier de LICENSE de Lucide.

@pierre-gilles dis-moi ce que tu en penses.
J’ai laissé les scripts de migration dans le repo du thème pour que tu puisses analyser ce qui a été fait sur les 2 repo.

Il y a un rapport de ce qui a été effectué :


Il reste 6 occurrences dynamiques à vérifier manuellement, j’avoue ne pas trop savoir à quoi ça correspond exactement :

J'ai supprimé les fichiers .backup créés par le script

Le script de migration a créé des fichiers de backup dans le repo de Gladys (ce qui fait du monde en plus).
Si tout est bon au niveau de la migration pour toi, on pourra nettoyer (code de Claude):

# Supprimer les fichiers .backup
find . -name "*.backup" -delete
find ../Gladys/front/src -name "*.backup" -delete

# Supprimer l'ancien dossier Feather
rm -rf fonts/feather

Chose que je en sais pas faire c’est tester le front sur ma machine pour valider, je n’ai pas trouvé le login/pwd adéquat :frowning:

1 « J'aime »

Tu peux lancer uniquement le front en mode démo avec la commande

npm run start-demo

depuis le dossier front

1 « J'aime »

J’avance bien.
J’ai quelques différences très très légères de taille/position pour les icônes, je mets 2 screenshots pour montrer la différence, si quelqu’un a une idée :



Il manque l’icône « signal strength » (voir TV), je vais regarder plus dans le détail.

1 « J'aime »

Oui, ca doit etre normal, c’est une icone ajoutée en code celle-ci (svg surement) je ne sais plus exactement ou elle est placée !

1 « J'aime »

Le dernier icon-sprite.svg je crois

1 « J'aime »

Je viens de terminer le changement de Feather à Lucide, ce n’est pas une mince affaire quand tu débutes :roll_eyes:

@pierre-gilles il faudra que tu valides la PR de theme-optimized (version 1.0.5):

Remplacé par https://github.com/GladysAssistant/theme-optimized/pull/5

Replace feather by lucide by smuteau · Pull Request #4 · GladysAssistant/theme-optimized · GitHub

pour qu’ensuite la PR de Gladys puisse avancer car elle dépend du nouveau theme-optimized :

Côté theme-optimized, les webfonts ont été installées et les noms des icônes Feather renommés au besoin et les icônes Lucide ajoutées dans le dashboard.css.
Il y a une petite différence visuelle sur certaines icônes, il faudra peut-être gérer certains cas dans le css du thème au besoin :

  • ajout d’un display: inline-block et vertical-align: -0.125empour que les icônes soit mieux positionnées et que le texte+valeur/bouton se décale vers la gauche (meilleur visuel)
  • augmentation de la taille des icônes signal à font-size: 1.25rem

Côté Gladys, il y a eu pas mal de modifications :

  • remplacement des classes fe fe- par icon- avec récupération des nouveaux noms au besoin
  • mise à jour des classes avec icônes dynamiques :
<i class={`fe ${TRIGGER_ICON[...]}`} />  ->  <i class={TRIGGER_ICON[...]} />
<i className={`fe fe-${props.icon}`}  ->  <i className={`icon-${props.icon}`}
etc.
  • mise à jour des cx() simple et dynamique :
cx('fe', 'fe-x-square', styles.iconUnselectAll)  ->  cx('icon-square-x', styles.iconUnselectAll)
cx('btn btn-sm btn-secondary', 'fe', 'fe-pause', {  ->  cx('btn btn-sm btn-secondary', 'icon-pause', {
etc.
  • suppression des import cx qui ne sont plus nécessaires
  • remplacement de l’icône svg pour le signal (LQI) par la webfont Lucide avec ajustement de la taille dans dashboard.css qui était trop petite à mon goût. NOTA : je n’ai pas supprimé les fichiers référents aux svg.
  • ajout de plusieurs icônes dans le sélecteur d’icônes pour les scènes, on passe d’environ 260 icônes à 470. On peut ajouter/supprimer, j’ai une liste complète des noms. Et pour @Will_71 , il y a des flocons pour ton thermostat :wink:
  • mise à jour pour le dark-mode
  • une typo corrigée pour day.weather_iconqui devait être day.weatherIcon
  • modification de la version de theme-optimized dans le package.json de /front.

J’espère que tout sera ok et dispo pour les questions :slight_smile:

4 « J'aime »

Ah voilà une avancée toute bête mais bien sympa je trouve !!

Hello @mutmut,

Merci pour la PR :slightly_smiling_face:

Je n’ai pas encore regardé le code en détail, mais quelques questions me viennent à l’esprit :

  • Est-ce que tu as prévu la migration des scènes existantes ?
  • Avec 470 icônes, est-ce que la vue de sélection d’icône dans les scènes reste facilement utilisable ?
  • Est-ce que tu as développé ça toi-même, ou avec l’aide d’une IA ? Si oui, quel modèle as-tu utilisé ?

Merci !

Salut @pierre-gilles

alors non car je n’ai absolument pas pensé à ça.
Par contre tu parles de quelles icônes ? celles qui sont au dessus du nom des scènes ou d’autres dont je n’ai pas connaissance ?

C’est encore bien utilisable. J’ai volontairement mis un maxi à 500 quand j’ai demandé à Claude de faire un choix pour les icônes supplémentaires.

Et donc je me suis fait aidé par l’application Claude sur mac, modèle Sonnet 4.6, en réitérant plusieurs fois la recherche des « fe ».

Ca doit être les icônes enregistrées en base de donnée pour chaque scène déjà crée

alors sur ça je ne sais pas du tout comment faire :flushed_face:

Sur le site démo, dans les scènes il en existe une qui a une cloche, et après changement de la webfont, la cloche était toujours là.
Il faudrait que j’essaie de remplacer la cloche avec alert-triangle qui a le nom qui change en triangle-alert (ou inversement) pour voir ce que ça donne.

EDIT : finalement ce n’est pas un bon exemple car la cloche est définie en dur dans le demo.js :

Je viens de remettre au propre la migration de theme-optimized avec le script de migration et des rapports, @pierre-gilles voici la PR :

Je vais essayer de faire la même chose pour le remplacement des fe dans le repo Gladys dans un premier temps pour que ce soit plus clair et reproductible contrairement à mes pas à pas que j’ai pu effectuer. Ensuite j’essaierai de faire le script de migration icônes des scènes.

@mutmut je ne suis pas sûr qu’on parle de la même chose :slight_smile:

Les scènes sont enregistrées en base de données, et si on veut passer de Feather à Lucide, il faut coder dans Gladys une migration de base qui ira convertir tous les anciens noms d’icônes en leurs nouveaux noms… Mais c’est assez technique, j’en suis conscient :grimacing:

si si, on parle bien de la même chose.
J’ai demandé à cette chère IA si les icônes étaient stockées en BD et la réponse était positive, dans la table t_scenes de mémoire.

Donc je vais regarder pour un script propre qui remplace dans les fichiers Gladys, et un script pour un remplacement des icônes dans la BD.

Mais dans un premier temps, il faudrait valider theme-optimized quand tu auras un moment