Replacing Feather icons with Lucide

Apparently we’re missing 25 icons compared to the last version (4.29.0) but I didn’t see any snowflakes either.

There’s a fork of Feather at Icons – Lucide
See if we can integrate it or not.

There are more icons available in this fork
image

1 Like

I just stumbled across it and it seems maintained compared to Feather.
We’ll have to see whether we can replace Feather with Lucide in (too) many places.

@pierre-gilles hi!
I’m looking into replacing Feather with Lucide.
I saw on this post (which is a bit old) that it didn’t cause you any particular issues — is that still the case?
Now Lucide has a webfont:

If that’s OK, I started the change with Claude’s help and I need your input to keep going in the right direction.
Aside from renaming icons which may differ (and thus a migration script), do we change the fe class everywhere in Gladys as Claude suggests below, or do we change the minimum to limit impact (keep the fe, only change the refs in dashboard.css)?

I did a full migration to be as clean as possible on the theme and on Gladys, here are the PRs :

I also added Lucide’s LICENSE file.

@pierre-gilles tell me what you think.
I left the migration scripts in the theme repo so you can analyze what was done on both repos.

There is a report of what was done :


There remain 6 dynamic occurrences to verify manually, I admit I’m not really sure what they correspond to exactly :

The migration script created backup files in the Gladys repo (which adds a lot of extra files).
If everything looks good regarding the migration for you, we can clean up (Claude’s code):

# Remove .backup files
find . -name "*.backup" -delete
find ../Gladys/front/src -name "*.backup" -delete

# Remove the old Feather folder
rm -rf fonts/feather

One thing I don’t know how to do is test the front-end on my machine to validate, I haven’t found the correct login/pwd :frowning:

1 Like

You can run only the front-end in demo mode with the command

npm run start-demo

from the front folder

1 Like

I’m making good progress.
I have some very, very slight differences in size/position for the icons, I’m attaching 2 screenshots to show the difference, if anyone has an idea:



The « signal strength » icon

1 Like

Yes, that should be normal, it’s an icon added in the code (probably an SVG) — I don’t remember exactly where it’s placed!

1 Like

The latest SVG

1 Like

I just finished switching from Feather to Lucide, it’s no small feat when you’re starting out :roll_eyes:

@pierre-gilles you’ll need to approve the theme-optimized PR (version 1.0.5):

Replaced by https://github.com/GladysAssistant/theme-optimized/pull/5

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

so that the Gladys PR can move forward afterwards since it depends on the new theme-optimized:

On the theme-optimized side, the webfonts have been installed, Feather icon names renamed as needed, and Lucide icons added in dashboard.css.
There’s a slight visual difference on some icons, you may need to handle some cases in the theme CSS if necessary:

  • added a display: inline-block and vertical-align: -0.125em so the icons are better positioned and the text+value/button shifts to the left (better visual)
  • increased the size of the signal icons to font-size: 1.25rem

On the Gladys side, there have been quite a few changes:

  • replaced fe fe- classes with icon-, retrieving new names when needed
  • updated classes with dynamic icons:
\u003ci class={`fe ${TRIGGER_ICON[...]}`} /\u003e  -\u003e  \u003ci class={TRIGGER_ICON[...]} /\u003e
\u003ci className={`fe fe-${props.icon}`}  -\u003e  \u003ci className={`icon-${props.icon}`}
etc.
  • updated simple and dynamic cx():
cx('fe', 'fe-x-square', styles.iconUnselectAll)  -\u003e  cx('icon-square-x', styles.iconUnselectAll)
cx('btn btn-sm btn-secondary', 'fe', 'fe-pause', {  -\u003e  cx('btn btn-sm btn-secondary', 'icon-pause', {
etc.
  • removed import cx that are no longer necessary
  • replaced the svg icon for signal (LQI) with the Lucide webfont, adjusting the size in dashboard.css which was too small for my taste. NOTE: I did not remove the files referencing the svgs.
  • added several icons to the icon selector for scenes, going from about 260 icons to 470. We can add/remove, I have a complete list of names. And for @Will_71, there are snowflakes for your thermostat :wink:
  • updated for dark mode
  • fixed a typo for day.weather_icon which was supposed to be day.weatherIcon
  • changed the version of theme-optimized in the /front package.json.

I hope everything will be OK and available for questions :slight_smile:

4 Likes

Ah, that’s a simple little improvement but really nice, I think!!

Hello @mutmut,

Thanks for the PR :slightly_smiling_face:

I haven’t looked at the code in detail yet, but a few questions come to mind:

  • Have you planned for migrating the existing scenes?
  • With 470 icons, is the icon selection view in the scenes still easy to use?
  • Did you develop this yourself, or with the help of an AI? If so, which model did you use?

Thanks!

Hi @pierre-gilles

So no, because I absolutely didn’t think of that.
On the other hand, which icons are you talking about? The ones that are above the scene names or others that I don’t know about?

It’s still quite usable. I deliberately set a max to 500 when I asked Claude to choose the additional icons.

And so I was helped by the Claude app on Mac, Sonnet 4.6 model, by repeating the search for « fe » several times.

That must be the icons saved in the database for each scene already created

so about that I have no idea how to do it :flushed_face:

On the demo site, in the scenes there is one that has a bell, and after changing the webfont, the bell was still there.

I just cleaned up the theme-optimized migration with the migration script and reports, @pierre-gilles here is the PR:

I’ll try to do the same thing for replacing the fe in the Gladys repo at first so that it’s clearer and reproducible, unlike the step-by-step approach I may have taken. Then I’ll try to create the migration script for scene icons.

@mutmut I’m not sure we’re talking about the same thing :slight_smile:

Scenes are stored in the database, and if we want to switch from Feather to Lucide, you need to code a database migration in Gladys that will convert all the old icon names to their new names… But it’s quite technical, I know :grimacing:

Yes, yes, we’re talking about the same thing.

I asked that dear AI whether the icons were stored in the database and the answer was yes, in the t_scenes table if I remember correctly.

So I’ll look into a clean script that replaces them in the Gladys files, and a script to replace the icons in the database.

But first, we need to validate theme-optimized.