Eveluating Lucide Icon Set for TiddlyWiki5

[pmario]

Hi folks,
Very nice project - Thanks.

I'm one of the maintainers of TiddlyWiki5 (TW). We are evaluating the possibility to process the Lucide "outlined" icons and make them "native" for TiddlyWiki. So we can drag&drop import them on a per-icon basis, from a manager-edition which contains all icons, into a user-wiki.

We internally need to use "outline" based icons because of TWs backwards compatibility guarantees.

The first goal is to create a plugin with a "drop in" replacement for about 130 icons. The current icons are custom made to fit our needs, but they are already 10+ years old. See the screenshot below.

Every single icon in "the core" is in use.

As you can see, even if Lucide has a lot of icons there are some specific icons missing. About 26 are missing: (At least I could not find something similar yet ;)

Toolbar Buttons From left to right

)

Click to view details

1. Mono Space ... insert code block markup at cursor position
2. Focus ... Works a "close others" or "focus" (It's in between lucide-target and lucide-circle-dot)
3. Excise ... Uses a selected section of text -> creates a new "note" -> replaces the section with a transclusion
4. Fold All ... Folds / hides every "text" section of visible notes
5. Fold Others ... Fold every text section other note except current one
6. Fold Note ... Fold text of current note
7. Auto Height ... Set the edit text area height to auto. So it matches the content height
8. Fixed Height ... Set the edit area to a fixed height. Scroll will be active
9. Resize Image ... Open resize image dialogue
10. Line Width ... Canvas drawing editor, set stroke width
11. Add Link ... Inserts a markup "link template" at cursor position.
12. Inline Code ... Cover selected text into backlinks eg: `code`
13. Permaview .. Create a URL that contains a "deep link" to open all open notes
14. -> 17 ... are plugin specific
15. New Here ... Create a new note which is tagged with the current note-title
16. Timestamps Off ... Can probably replaced with lucide-alarm-clock-off and
17. Timestamps On ... alarm-clock-check .. (not sure yet)
18. Add Transclusion Link ... Insert special markup syntax at cursor position
19. Story View ... Defines how the "story stream" should look like.
20. Zoomin Story View ... a subtype of 22
21. Unfold All ... Show the text area for all notes. Opposite of 4.
22. Unfold Note ... Opposite of 6
23. Open Note in New Window ... Opens a note in a new window.

As you can see, we do have "somewhat compatible" icons already (Made by a TW user).

My Qustions now are

Q1. About Side-Loading: Is there an established way to create Lucide compatible icons and "side-load" them into the Lucide "build-process", when icons are updated. The goal is to allow us to build our icons together with a new Lucide release.

Q2. Is there a chance to get some of our icons into "upstream"

More Screenshots

Show More Screenshots

A tiddler is a "note" on steroids ;)

The screenshots show unoptimized experiments. So the edit toolbar buttons seem to be off a bit.

• GitHub issue tracking our research: Adopt Feather/Lucide icons TiddlyWiki/TiddlyWiki5#7652
• 2 click link to a demo edition crated by a TW user

[chessurisme]

To 'side-load' and get your custom icons 'upstream,' you can:

1. Submit a Pull Request (PR): Design your icons following the icon design guide and submit a PR to Lucide.

2. Create an Icon Request: If you don’t want to design the icons yourself, create an issue in the Lucide repository to request new icons. Include practical use cases to help the designers understand their purpose.

Both methods help ensure your icons are considered for future updates of Lucide. Lucide ensures all icons are consistent.

Upon seeing the icons, I am concerned that some may not be compatible with Lucide, especially icons 10, and 13 through 17.

• the 10th icon has inconsistent stroke widths, which violates icon design principle number 3,
• the 13th icon is too dense, violating icon design principle number 11.
• icons 14 through 17 have filled sections, which is unusual for Lucide—icons in Lucide are stroke-based. I suggest customizing the icons in your project integration to achieve the desired effect.
• also, you mentioned that the focus icon is somewhat between lucide-target and lucide-circle-dot. If you mean the middle circle, this is somewhat similar to the issue in [icon request] help, alert, info with no circle #1858.

I recommend following the methods mentioned above to address these concerns.

[pmario]

Thank you for your detailed feedback. That's very welcome.

I knew that we would have some "hiccups".

Especially No. 10 "Set stroke width" for drawing. It's challenging to "show" different stroke-width without changing the "stroke width" :)

[chessurisme]

@pmario, you may try integrating a customized icon based on the desired effect for your project, similar to what your team did in the linked issue.

We cannot force Lucide to accept our icons 'upstream' if they do not meet their standards. Lucide is committed to maintaining clean and consistent icons throughout the entire design system.

However, this does not prevent us from progressing towards our goal. Here are a few ways to achieve that:

1. Relook Icons: Lucide has made rapid progress throughout the year, so it's worth re-examining their icons for similar use cases, as you did earlier.

2. Design Customized Icons: If you can’t find an icon for a specific use case, design one yourself or have your team create it. The icon set mentioned in the latter part of the issue you provided looks promising. Try to follow Lucide’s standards as closely as possible to ensure your icons remain consistent.

3. Create a Custom Function That Mimics createIcons(): You may want to develop a custom function that works similarly to Lucide's integration method. This way, whether you're implementing Lucide icons or customized ones, your approach remains consistent and hassle-free.

If you have a better approach, feel free to use it as long as it helps you resolve this issue. I hope this advice is helpful.

[pmario]

@chessurisme, Thanks for your information.

I did re-create most of our specific icons in a Lucide compatible way. At least I hope it will be compatible.

I did create a build system that will convert Lucid icons into a format we can work with. The whole process is 90% automated, so we should be pretty flexible from now on.

At the moment I'm running an RFC with our community, to see what they think. The icon set is as minimalistic as it can be. I looks like this at the moment. Some of them use the old format, but that's not a problem atm.

I intend to make all icons available for our users. The main difference between the Lucide default icons and TiddlyWiki icons is, that we need path-based icons, that can be "filled" with CSS, for backwards compatibility reasons.

Again - Thank you.

[chessurisme]

Wow, what a good approach! That was a smart move. Indeed, Lucide are stroke-based, not path-based. For my suggestion, try using Lucide icons and apply this tool in your codebase. It converts Lucide icons (stroke-based) into path-based ones. This is the tool: SVG Path Converter. It works in JavaScript environments, but I'm not sure about others. This is the only tool I can think of for now.

[pmario]

I did already create a build stack that converts Lucide icons to our .tid format. We need to apply some more "magic" to the SVG code. We need to add some class=".." definitions, so every icon can be styled individually, by name, with CSS by our users.

[pmario]

Do you know about Tabler icons? They seem to use the same SVG templates as Lucide does.

[chessurisme]

Upon seeing the Tabler icons, I noticed that they are different. Take this abacus icon from Tabler, for example. It violates Lucide's design principle number 8. How do I know? Check this SVG inputted in the Lucide Studio.

[pmario]

Thanks for the link to the Lucide Studio. I did see some images in the Lucide's PRs. That's a nice tool to check icons. I'll use it with my own ones.

I wanted to know "in general", if you know about the Tabler ions? I could not find out, who was "first". I know Lucide is a fork of the Feather icons, which started at least 10 years ago. So it could have been the starting point of both projects.

It seems the Tabler project uses less strict rules, but creates very similar icons. I found out about them some days ago.

Just a general question.

[pmario]

Would something like this be compatible?

Open lucide studio

[chessurisme]

As I am digging through the release version, Tabular's first pre-released happened last March 20, 2020. If that so Lucide came first.

To make sure the icon feels Lucidy, visit there design guidelines found in the documentation.