Create Custom Lucide Icon Sets

, , ,
#1

Hi folks,

I did update the Custom Icons Edition — Based on Lucide v0.452.0, which now contains a basic “Dashboard” tiddler that will show you an overview about custom icon sets that can be created with the edition.

If you open the Lucide Gallery tiddler you will get an overview about all icons available at the moment.

  • As soon as you click an icon, a new icon-set configuration will be created, with a “random-name”.
  • The right sidebar → Icon Sets tab will be activated that shows the “Listed icons”
  • Standby is a temporary storage, for icons were you are not sure, if you want to use them yet
  • Plugin Meta Data shows some meta data needed for TW plugins
  • The Verify Settings button will create a new tiddler $:/temp/bundle-plugin-verify that contains some information, what will be done.
  • After “Verify Settings” is active, the Plugin Meta Data section can be edited, if you want to.
    • You can also add info to the readme plugin tiddler
    • Every tiddler with the prefix $:/plugins/lucideicons/ will be added to the plugin
  • The “Version” number is set to “auto-increment” the “patch” element. So you only need to change that if you set minor or major numbers.
  • The Not yet button deletes the $:/temp/bundle-plugin-verify tiddler
  • The Create Plugin button creates the custom plugin and opens it
  • You can manage several configurations with the edition.
  • The data is stored in the browser storage. So no info leaves your system, but you should be able to modify your plugins later

The ID field is created using a sorted list of all the icon titles in the plugin. So if the icons in a plugin are the same, that ID will be the same, even if the pugin has a different name or description.

This will make it easier to compare 2 different plugins with the same icons in the future.

The plugin names are randomly generated using 50 adjectives and 50 animal names, for easy testing.
You should change them for production in your own wikis.

custom-icon-plugin

Feedback is very welcome.

Next Steps

  • Implement an Icon Filter

have fun!
Mario

6 Likes
#2

Hi, I did just publish the search functions.

  • By title
  • By category
  • By tag

Category

image
image1365×943 89.4 KB

Tags

Listing all tags can take several seconds, since there are 2800++ tags and icons are listed several times. But the filter is fast.

image
image1346×942 35.6 KB

have fun!
PS: The lists already use the evencatcher widget, which made it much faster.

3 Likes
#3

Wonderful job and very useful. Going way beyond what I expected at first. Thank you!

#4

Hi Thomas,
Thanks for the feedback. – It was much more work than I expected at first. As always. The devil is in the details :slight_smile:

I think the automatic build process is function-complete now. But the whole thing is still beta and subject to change.

There is some discussion going in at GH, how some special icons should look like. Eg: The dynamic save button. The “cloud-save” button for the node.js version and some of the “filled” icons.

We will also need to make more experiments with thinner and thicker icons – Which only works with the test-close-button-params icon

Scaling should be OK now.

The cool thing is, that the Lucide upstream project already adopted one of the TW “missing” icons. The eye-closed is new and I think it was inspired by my discussion at GitHub.

grafik
grafik956×282 11.8 KB

#5

Exerpiemental

I did just upload a new experiment, using new parameters for Lucide based icons.

Experimental Demo: Lucide Icons — Lucide v0.452.0

Important

  • This mechanism still experimental and needs more testing, if it actually is usable.
  • To make it work consistently, we will probably need some more CSS rules. → Hence experimental

Icon Parameters

All icons have 3 parameters now, that can be used for parametrized transclusion. \parameters (size:"22pt", stroke:"none", stroke-width:"0", )

  • size … since TW v5.3.0
  • stroke … lucide icons only … defines the strok color eg: <<color abc>> or currentColor
  • stroke-width … lucide icons only … Depending on the stroke color, the icon will be appear thinner or thicker

dynamic-thickness

Feedback with some CSS code that makes it consistent is very welcome.

Have fun!
mario

All 1500++ icons: Custom Icons Edition — Based on Lucide v0.452.0

1 Like
#6

Hi @pmario that looks great, very encouraging.