A new set of icons for Tiddlywiki

[Thomas_Chuffart]

I’m happy to present to you the Feather Icon set for Tiddlywiki.
I used the Feather icon set by Cole Bemis and extended it a bit to add the missing icons to create a full set for Tiddlywiki.

Enjoy this summer fresh new look for the new v5.3.0 !
(you can use it on any prior version of course).

EDIT july-07-2023
Today I modified the core monoblock tiddler to use the correct feather icon.
You can reinstall the complete pack from the original site, or just import the corrected tiddler with this file.

$__core_images_mono-block.json (187 Bytes)

[amreus]

I do really like these more than the originals, so thank you for this.

Can the X (close) icon be made smaller in the “Open” tab? Compare the first image to the second. The first is Feather icons, the second a new empty. Thank you again.

[Thomas_Chuffart]

You can just download again the $:/icon/feather/x.svg tiddler from the Father icon set wiki, I corrected it.

[Thomas_Chuffart]

I edited my firt post. I made a small correction on the Feather icon set.

[Justin_H]

These are really nicely made, though I did notice that the hamburger icon for the sidebar changes in size when toggling it, is this by design?

[vilc]

@Thomas_Chuffart nicely done! The set brings a new fresh look to TW. Good job creating the custom TW-specific icons. There are only some minor inconsistencies e.g. some arrows and chevrons appear to have thicker lines than other icons.

I was also recently thinking about creating a custom icon set, so I have two ideas to improve the functional side your icon set:

Pack it as a plugin. This would allow to easily switch between the core icons and your set by disabling or uninstalling the plugin. It think it should be relatively easy to do using Gatha Studio Workspace by @Mohammad.
Without your set being a plugin, if one wants to switch to core icons, one must delete all the $:/core/images/* tiddlers.

Consider parameterizing the icon sizes. v5.3.0 allows the size of the icon (and I believe also the number on the calendar icon, but your set isn’t using it anyway) to be a parameter – look at the contents of the core icon tiddlers. This allows to e.g. easily change the icon size to insert it in text {{$:/core/images/mail|1em}}. This would be probably easiest to do by directly editing the plugin json and replacing text. The downside is that these parametrized icons would not work in older TW versions. I am also not sure how passing the parameters further would work with your current setup, where the $:/core/images* transclude the actual icon tiddlers.

[jeremyruston]

Thank you @Thomas_Chuffart. The Feathericons are very good. I like the way that they can be used at different line widths. The technical approach with which they are drawn is also much more concise and flexible. Therefore, I have make a GitHub ticket proposing that TiddlyWiki 5 adopt the Feather icon set for the core.

[Thomas_Chuffart]

I’m very glad with this. But I think technically there is some concepts in managng SVG files I need to understand before everything run smoothly. So I may have some remarks and questions about it :

1- I’m not the creator of the original set of Icons. So one might ask Cole Bemis if he is OK with this, but don’t think this is a real issue
2- I created, for now, 36 icons specifically for TW to blend into this set. So we should ask him to incorporate them to the set. And somehow, he would eventually correct those to match his own rules of design.
3- The set I have put on the download site is using icons that have been “flatten”, so you cannot set a width for the contours. But I should be able to share the original ones with only 1 stroke line instead of a “filled” version. I had done this while reading somewhere on this site that the icons designed that way would have been more compact or to avoid certain color issue I can’t remember.
4-This would need, I assume, to add a width parameter to be able to affect it globally on a wiki.
5- For my own information, in the original TW icons, what is the purpose of the class parameter ? (like class=“tc-image-cancel-button tc-image-button” )
6-And for your information, I experienced some issues with the new save-button-dynamic that sometime show both icons at the same time.

edited some time later…
I just read the github ticket and I understand all the issues and technical decisions that need to be resolved…