[Announcement] "TW Icons" - A large collection of icons for TiddlyWiki

1,786 views
Skip to first unread message

moros...@gmail.com

unread,
Feb 7, 2021, 4:41:37 PM2/7/21
to TiddlyWiki
TW Icons - A large collection of icons for TiddlyWiki

Link: https://morosanuae.github.io/tw-icons

Joshua Fontany

unread,
Feb 7, 2021, 9:20:33 PM2/7/21
to TiddlyWiki
Really cool, and really well done. Thanks!

Mohammad Rahmani

unread,
Feb 7, 2021, 11:58:13 PM2/7/21
to tiddl...@googlegroups.com
Hi Morosanuae,
 This is a great contribution. Aside from very useful collection of icons, I love your project as
1. icons are compatible with TW core icons (have classes, 22pt square in size, shipped as svg fragment not image, tagged,...)
2. the UI is clean and very simple to non-tech users
3. search and export functionality are awesome

You also showed how TW can be effectively used for real applications

Just a minor suggestion: good to add a documentation part to GitHub page how one add more icons to this app.

Best wishes
Mohammad


On Mon, Feb 8, 2021 at 1:11 AM moros...@gmail.com <moros...@gmail.com> wrote:
TW Icons - A large collection of icons for TiddlyWiki

Link: https://morosanuae.github.io/tw-icons

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c8e24007-9ad8-48c4-85a0-72e86fcbb9f6n%40googlegroups.com.

moros...@gmail.com

unread,
Feb 8, 2021, 4:15:46 AM2/8/21
to TiddlyWiki
Thanks guys, I really appreciate and I hope my work will be useful to you.

Anyway, if you have suggestions for improving the app or want to report bugs, please, don't hesitate to write them here.

@Mohammad The problem is that I need to process the icons in batch myself with the help of a script. But this is easy. The harder part is finding valid sources of icons. So you (and other interested users) can indicate me some sources of icons, but something that can be downloaded in batch (e.g. archives, lists in various formats etc). For the icons currently on the site I've used the "svg-icon" collection (https://github.com/leungwensen/svg-icon) but I didn't manage to include all icons because some differ in the way they are structured (they are from different sources).

Mohammad Rahmani

unread,
Feb 8, 2021, 6:03:00 AM2/8/21
to tiddl...@googlegroups.com
Thank you!


Best wishes
Mohammad


On Mon, Feb 8, 2021 at 12:45 PM moros...@gmail.com <moros...@gmail.com> wrote:
Thanks guys, I really appreciate and I hope my work will be useful to you.

Anyway, if you have suggestions for improving the app or want to report bugs, please, don't hesitate to write them here.

@Mohammad The problem is that I need to process the icons in batch myself with the help of a script. But this is easy. The harder part is finding valid sources of icons. So you (and other interested users) can indicate me some sources of icons, but something that can be downloaded in batch (e.g. archives, lists in various formats etc). For the icons currently on the site I've used the "svg-icon" collection (https://github.com/leungwensen/svg-icon) but I didn't manage to include all icons because some differ in the way they are structured (they are from different sources).

Great, I may have some suggestions!

Best wishes
On Monday, February 8, 2021 at 6:58:13 AM UTC+2 Mohammad wrote:
Hi Morosanuae,
 This is a great contribution. Aside from very useful collection of icons, I love your project as
1. icons are compatible with TW core icons (have classes, 22pt square in size, shipped as svg fragment not image, tagged,...)
2. the UI is clean and very simple to non-tech users
3. search and export functionality are awesome

You also showed how TW can be effectively used for real applications

Just a minor suggestion: good to add a documentation part to GitHub page how one add more icons to this app.

Best wishes
Mohammad


On Mon, Feb 8, 2021 at 1:11 AM moros...@gmail.com <moros...@gmail.com> wrote:
TW Icons - A large collection of icons for TiddlyWiki

Link: https://morosanuae.github.io/tw-icons

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c8e24007-9ad8-48c4-85a0-72e86fcbb9f6n%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

TiddlyTweeter

unread,
Feb 8, 2021, 6:13:47 AM2/8/21
to TiddlyWiki
Ciao Morosanuae 

I fully agree with what Mohammad wrote about https://morosanuae.github.io/tw-icons/

Basically, it gives us all an optimally usable resource for Icons in TW. Spot-on. Addresses that need directly & well.

Best wishes
TT 

Mohammad wrote ...

TiddlyTweeter

unread,
Feb 8, 2021, 6:19:32 AM2/8/21
to TiddlyWiki
... The harder part is finding valid sources of icons. So you (and other interested users) can indicate me some sources of icons, but something that can be downloaded in batch (e.g. archives, lists in various formats etc).

Right.
 
For the icons currently on the site I've used the "svg-icon" collection (https://github.com/leungwensen/svg-icon) but I didn't manage to include all icons because some differ in the way they are structured (they are from different sources).

Right. Different libraries have different "grids" for SVG proportions. Some have no clear approach at all.

I will keep an eye open , and if I come across a collection library that can be used, I will let you know.

Best
TT

David Gifford

unread,
Feb 8, 2021, 8:35:51 AM2/8/21
to TiddlyWiki
oooo yummy! I added this to the TiddlyWiki toolmap.

moros...@gmail.com

unread,
Feb 12, 2021, 10:42:24 AM2/12/21
to TiddlyWiki
A new version of "TW Icons" is available: v1.0 (https://morosanuae.github.io/tw-icons) with a total of ~17000 icons. For more info please checkout the "version history".

Peter Pauer

unread,
Feb 13, 2021, 9:25:44 AM2/13/21
to TiddlyWiki
First of all thanks for your great work!

But I have got a problem. I cannot use the imported images from the editor toolbar ("insert picture" button). I have imported them with the import button and they are tagged right ($:/tags/Image). Can somebody help? :)

moros...@gmail.com

unread,
Feb 13, 2021, 10:43:47 AM2/13/21
to TiddlyWiki
Hi Peter. You're welcome!

I'm sorry but you can't (at least for now) use the icons from "TW Icons" library with the "insert picture" button because this is currently a limitation of TiddlyWiki. They don't appear in the drop-down list because they don't have the required content type (one of "images content types" - see here: https://tiddlywiki.com/#ContentType). I don't know if you've noticed but even the "core" TiddlyWiki SVG tiddlers - the ones prefixed with "$:/core/images/" - are not available to the "insert picture" functionality. The "core" Tiddlywiki images and the ones I've included in the "TW Icons" library are simple tiddlers, with "text" content type (text/vnd.tiddlywiki).

The possible solutions are (but  none of them are quick/easy):
  • To modify (improve) the "insert picture" functionality
  • To create alternative variants of icons for the entire "TW Icons" library.
Regards,
Morosanuae

Mohammad Rahmani

unread,
Feb 13, 2021, 11:13:49 AM2/13/21
to tiddl...@googlegroups.com
Hi Morosanuae,
 Many thanks for the update! TW Icons is now part of the workflow and it is really helpful.
 The filter by library is very useful. The help (want to know more) is great!

I just have two minor suggestions:

1. Is it useful to be able to drag and drop an icon from TW Icons to another Tiddlywiki? Not sure, but it seems to be handy
2. Icons have four tags: $:/tags/Image Icons Images  SVG. Why are these four tags used? Why not to just use $:/tags/Image only
Of course, for me this is fine. I use Commander and on Import, I can fire up Commander with a single click and add/remove tags or even change the name

I love TW Icons. It is terrific and designed very well. TW Icons is a great app and it is an example how Tiddlywiki can be used to create real web app.


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
Message has been deleted

moros...@gmail.com

unread,
Feb 13, 2021, 11:41:01 AM2/13/21
to TiddlyWiki
Hi Mohammad and thanks for your appreciation!

1. The drag'n'drop functionality is a much easier (and simpler) method if you just want a single icon (or even more), especially for beginners. No "JSON" downloading/importing stuff.
2. I think this is also for beginners (and other users) to discover the icons more easily. The new tags added will appear in the "Tags" tab in sidebar. I plan to add an option for configuring tags in the future , for those who don't want them.

The code of "TW Icons" was created in relative haste so don't expect it to be perfect. I've focused on features (functionality) only.

Mohammad Rahmani

unread,
Feb 13, 2021, 11:41:34 AM2/13/21
to tiddl...@googlegroups.com
Edited

Hi Peter,
 TW Icons has excellent design, but if you like to use icons as images you can use Commander to help you to remove the prefix $:/images/ part.
 Then please bear in mind that these are SVG parts and NOT SVG images, so use transclusion. For example {{$:/images/material-design/note-plus}}
If you removed the prefix then use {{material-design/note-plus}}

There is some explanation on https://tiddlywiki.com/#Using%20SVG

Side note: in editor pressing ctrl+L lets insert link to a not system tiddler, then you can trascludify it. Maybe Jeremy can add a shortcut to act like insert link but transclude a tiddler.



Best wishes
Mohammad


On Sat, Feb 13, 2021 at 8:08 PM Mohammad Rahmani <mohammad...@gmail.com> wrote:
Hi Peter,
 TW Icons has excellent design, but if you like to use icons as images you can use Commander to help you to remove the prefix $:/images/ part.
 Then please bear in mind the, these are SVG part and SVG images, so use transclusion {{$:/images/material-design/note-plus}}
If you removed the prefix then use {{material-design/note-plus}}

There is some explanation on https://tiddlywiki.com/#Using%20SVG

Side note: in editor pressing ctrl+L lets insert link to a not system tiddler, then you can trascludify it. Maybe Jeremy can add a shortcut to act like insert link but transclude a tiddler.


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Mohammad Rahmani

unread,
Feb 13, 2021, 11:49:45 AM2/13/21
to tiddl...@googlegroups.com
Hi again Morosanuae,
Thank you for your quick response. Okay I understand what you mean.

Does it make sense to add Google Noto Emojis (of course the colored ones)? Or do you think they are different?



Best wishes
Mohammad


moros...@gmail.com

unread,
Feb 13, 2021, 11:58:53 AM2/13/21
to TiddlyWiki
@Mohammad

They are different because they are more complex but this is not really the problem. Every library is different (even though in a small degree) in terms of content structure. It is important for the icons from a library to be consistent (all with the same structure). This allows me to process them in batch. I'll analyze in more depth your proposed library and will come back with feedback.

Regards,
Morosanuae

Mohammad Rahmani

unread,
Feb 13, 2021, 12:14:42 PM2/13/21
to tiddl...@googlegroups.com
@Morosanuae
They are different because they are more complex but this is not really the problem. 

That is right! I see also the look and feel of emojis are quite different. So  please ignore my comment, maybe in another project.


Best wishes
Mohammad


moros...@gmail.com

unread,
Feb 17, 2021, 10:09:50 AM2/17/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.1 (https://morosanuae.github.io/tw-icons) now with a total of ~25000 icons.

Features:
  •  The "Google Material Design" library was added. More libraries are on the way, so stay tuned! :)

For more info, please checkout the "version history".

David Gifford

unread,
Feb 17, 2021, 11:19:22 AM2/17/21
to TiddlyWiki
Wow! 25,000 and more on the way!

Hey, but can you find and include icons with the alphabet? An A icon, B icon, etc? I did a search for 'letters' and 'alphabet'.

moros...@gmail.com

unread,
Feb 17, 2021, 12:34:53 PM2/17/21
to TiddlyWiki
Hi David,

please use the following search keywords: "alpha" or "grade".

TiddlyTweeter

unread,
Feb 17, 2021, 2:12:31 PM2/17/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.1 (https://morosanuae.github.io/tw-icons) now with a total of ~25000 icons.

Features:
  •  The "Google Material Design" library was added. More libraries are on the way, so stay tuned! :
WHOAH !!! That is now a super useful resource! Way better, actually, than most any SVG online libraries.
And the fact you prepared, via scripts, all the icons to be immediately usable in TW is illustrative of your skill in programming.

I think it is a major achievement! 

And, given the vast scale of it now, I'm amazed at its GOOD performance.
So it is also concrete testament that with good data design TW can be well performative at scale. 

All hats off. Best wishes,
TT
 

moros...@gmail.com

unread,
Feb 17, 2021, 4:48:32 PM2/17/21
to TiddlyWiki
@TiddlyTweeter Thank you very much! It means a lot! :)

My suggestion for you all is to make personal copies of the site versions as backup in case I will not be able to ensure the availability of the site (and the content) in the future, so one can restore it to another public location. Now it is a free and open community resource, so anyone can do that. Also you can use it as an offline version in case of internet connection failure. It's only about 30 MB.

strikke...@gmail.com

unread,
Feb 17, 2021, 5:22:08 PM2/17/21
to TiddlyWiki
Thank you so much for this wonderful resource. Also for reminding us, to save a local copy. 29.2mb to be precise.


Birthe

moros...@gmail.com

unread,
Feb 17, 2021, 5:26:45 PM2/17/21
to TiddlyWiki
@Birthe You're welcome!

Joshua Fontany

unread,
Feb 17, 2021, 6:35:47 PM2/17/21
to TiddlyWiki
Super impressed with how this has come together. I'll have to review how you are preparing the tiddler files, and add in some of the libraries that I have scraped meta-data for. Thanks!

moros...@gmail.com

unread,
Feb 18, 2021, 8:25:32 AM2/18/21
to TiddlyWiki
@Joshua Thanks! Can you explain in more detail what you have in mind? I didn't understand very well. I need aliases for icons. I found this kind of metadata for some of the libraries but I didn't include it yet.

moros...@gmail.com

unread,
Feb 18, 2021, 8:39:14 AM2/18/21
to TiddlyWiki
@Joshua As I said before, I've processed the original SVG files with some scripts made in Windows 10 Powershell. All operations are done with PowerShell: creating files, replacing content, creating the TiddlyWiki formal structure and adding content. The final output is a JSON file which includes an array of JS objects (every object is an icon). You can see below an example:

{
"title":"$:/images/google-material-design/action/filled/18px/star-rate",
"tags":"$:/tags/Image Icons Images SVG",
"caption":"star-rate",
"collection":"filled",
"category":"Action",
"library":"Google Material Design",
"library_version":"5.9.55",
"text":"<svg width=\"22pt\" height=\"22pt\" class=\"tc-image-gmd-star-rate tc-image-button\" viewBox=\"0 0 18 18\" width=\"18\"><path d=\"M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z\"/><path d=\"M0 0h18v18H0z\" fill=\"none\"/></svg>"
}

David Gifford

unread,
Feb 18, 2021, 10:49:30 AM2/18/21
to TiddlyWiki
Thanks! That will do!

moros...@gmail.com

unread,
Feb 18, 2021, 11:01:47 AM2/18/21
to TiddlyWiki
As I said before, I want to add "aliases" for icons. For example for the word "house" there should be aliases like: "home", "building", "construction", "city" etc.
Does anyone knows if a catalog or a similar resource exists on the internet?  But something standardized, with a formal structure. One that can be used for batch processing.
If you know please let me know.

moros...@gmail.com

unread,
Feb 20, 2021, 3:58:09 PM2/20/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.2 (https://morosanuae.github.io/tw-icons) now with a total of ~32000 icons.

Features:
  •  The "Remix Icon" and "IconPark" libraries were added.

For more info, please checkout the "version history".

Pit.W.

unread,
Feb 20, 2021, 4:30:48 PM2/20/21
to tiddl...@googlegroups.com

Sir,

I dare to say that you have created a resource of internet-wide relevance, far beyond our community.

Please allow me to remain your sincere admirer,

Pit.W

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4fcbb76c-912c-4457-b007-09612e6b1228n%40googlegroups.com.


_________________________________________________________________
________________________________________________________
Ihre E-Mail-Postfächer sicher & zentral an einem Ort. Jetzt wechseln und alte E-Mail-Adresse mitnehmen! https://www.eclipso.de


Mat

unread,
Feb 20, 2021, 6:43:25 PM2/20/21
to TiddlyWiki
... ~32000 icons.

This is getting crazy! Ha ha!!! :-D :-D :-D

<:-) 

Joshua Fontany

unread,
Feb 20, 2021, 7:24:21 PM2/20/21
to TiddlyWiki
Awesome, thank you for the example data file.

I have meta-data available for a few of the libraries I was experimenting with. For example, for GameIcons.net (which I think you have imported), their website-catalog has tags for all the icons. I used Node and an 'R' script to manually download and partse each web-page, extract the meta-data (tags, etc), and then append that to the final Tiddler data. (Repo: https://github.com/joshuafontany/TW5-SVG-Scripts).

This allowed me to extract, for example, the below block of the

```
caption: police-badge
description: Symbol of law enforcement. The best moment to show it, it's to shout "FBI" and break the door with a kick.
name: andymeneely/police-badge
tags: $:/tags/Icon police shield symbol
title: $:/icons/gameicons/andymeneely/police-badge
type: 
```

I have that for the whole library. The FontAwesome5 svg files also have a separate meta-data YAML file that I parsed for the meta-data.

I will clone your repo and see how I can integrate the meta-data I have available!

Best,
Joshua Fontany

moros...@gmail.com

unread,
Feb 21, 2021, 6:24:01 AM2/21/21
to TiddlyWiki
@Pit.W. Thanks a lot Pit! I feel a little embarrassed to be honest. After all, ANYONE can accomplish this with a little effort and knowledge (just a little). But thanks anyway! I'm glad that you (and others) find my work useful. I consider this my tribute to TiddlyWiki app and its creators and also to our community.

@Mat And it may become even crazier! ;)

@Joshua You're welcome! I also have discovered metadata for some of the libraries, but I was thinking of an universal catalog. I want to add metadata for the entire library, at least for generic icons (e.g. house, book, people etc.) and their variants. And I want to do it in a single operation, with big JSON file that contain all the icons.

moros...@gmail.com

unread,
Feb 21, 2021, 7:25:39 AM2/21/21
to TiddlyWiki
So, as I said previously, I want to add metadata to icons, especially "aliases", but I don't know what is the better method:

  • to add them as tags or
  • as a list in a field called "aliases".
  • or maybe both?

What do you think?

strikke...@gmail.com

unread,
Feb 21, 2021, 7:40:39 AM2/21/21
to TiddlyWiki
Icons are lovely, lots of icons even better. The best part being the beautiful presentation and ease of use. I am fascinated by the speed of it all despite it being 35.7 mb big last time I downloaded.

Now wouldn't tags for aliases put a hefty burden on exactly the speed of use?

Birthe

moros...@gmail.com

unread,
Feb 21, 2021, 7:59:52 AM2/21/21
to TiddlyWiki
@Birthe

"Now wouldn't tags for aliases put a hefty burden on exactly the speed of use?"

I guess this will somehow impact performance, but if you can't find the icons you need in a short amount of time, I think the speed of the app becomes somewhat irrelevant.

It may be relevant only if you want to visually parse all the pages searching for your desired icons.

strikke...@gmail.com

unread,
Feb 21, 2021, 8:17:00 AM2/21/21
to TiddlyWiki
I understand. I do not know enough however to know if there is a difference in using tags or alias field. How that would impact the performance. I think someone did a test of that long time ago. unfortunately I was not able to find the result by searching.

Birthe

moros...@gmail.com

unread,
Mar 11, 2021, 3:42:07 AM3/11/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.3 (https://morosanuae.github.io/tw-icons) now with a total of ~35500 icons.

Features:
  •  3 new libraries added: "Boxicons", "Emblemicons" and "Tabler Icons".

For more info, please checkout the "version history".


Ray Vermey

unread,
Mar 11, 2021, 3:46:45 AM3/11/21
to Mohammad Rahmani
Very nice!!

Ray

Op do 11 mrt. 2021 om 09:42 schreef moros...@gmail.com <moros...@gmail.com>:
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

TiddlyTweeter

unread,
Mar 11, 2021, 4:16:08 AM3/11/21
to TiddlyWiki
Ciao moros...@gmail.com wrote:
A new version of "TW Icons" is available !!!

v1.3 (https://morosanuae.github.io/tw-icons) now with a total of ~35500 icons.

Features:
  •  3 new libraries added: "Boxicons", "Emblemicons" and "Tabler Icons".

Super-good! IF a user can't find a needed icon in that brilliant collection then it probably does not exist!

ALSO, I want to comment, that "TW Icons" is likely the best example I have ever seen of a TW app at serious SCALE that works really well for purpose.

Best wishes
TT

moros...@gmail.com

unread,
Mar 11, 2021, 5:08:10 AM3/11/21
to TiddlyWiki
@Ray and @TT thanks a lot!

Mat

unread,
Mar 11, 2021, 9:11:19 AM3/11/21
to TiddlyWiki
Morosanaue - since you're a perfectionist I will mention a few bits that would improve it even further, IMO:

1) A link on the page to the gh page for posting issues and ideas etc instead of here. (Unless you really prefer here ;-)
2) Often I only want a single icon. It is more convenient to directly drag this over into my tiddler rather than having to export it and fiddle with files. It is already possible to directly drag'n drop from the big list but it would be good if one could directly drag from the selected list because I first put "potential" icons there and only thereafter decide which one I want.
3) It would also be neat if one could directly drag all the selected icons without export. For example they could all be added so they show in a draggable tag pill. (Maybe the "Export selected" button could even be a tag pill styled to look like it does now so that clicking it (clickdown and up) triggers export but clicking down and drag also works. I have no idea if this is possible.)
4) When scanning for icons it is somewhat annoying to have to scroll the page. Even if there is a Nextpage button both at top and bottom, it would be even smoother if one can simply stay with the mouse on Next page and click it repeatedly. I.e this means the big list would not display as many icons at a time per page. 

Thank you for THE icon haven in TiddlyVerse.

<:-)

moros...@gmail.com

unread,
Mar 11, 2021, 9:38:13 AM3/11/21
to TiddlyWiki
Hi Mat,

1) OK. I'll include that in the next version.
2) Sounds good! I'll add this feature in the next version.
3) This sounds good also, but I'll have to investigate if there is a technical solution for this.
4) The "Max. icons/page:" setting doesn't help you? You can select a lower limit for the number of icons displayed per page.

Thanks for the feedback!

moros...@gmail.com

unread,
Apr 12, 2021, 4:34:56 PM4/12/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.4 (https://morosanuae.github.io/tw-icons). Now with a total of ~36500 icons (13 libraries).

Features:
  •  2 new libraries added: "Eva Icons", "Heroicons" (requested by Mohammad).
  • The icons selected in the export list can now be imported by drag'n'drop (requested by Mat).
For more info, please checkout the "version history".

@Mat I couldn't find a simple (wikitext based) solution for importing a batch of icons by drag'n'drop. Sorry.

Mohammad Rahmani

unread,
Apr 12, 2021, 11:04:26 PM4/12/21
to tiddl...@googlegroups.com
On Tue, Apr 13, 2021 at 1:04 AM moros...@gmail.com <moros...@gmail.com> wrote:
A new version of "TW Icons" is available !!!

v1.4 (https://morosanuae.github.io/tw-icons). Now with a total of ~36500 icons (13 libraries).

Traffic! TW-Icons is not only a wonderful source of svg icons for designers and TW users, but also a performant TW example with a very clean and minimal UI yet very beautiful!



Features:
  •  2 new libraries added: "Eva Icons", "Heroicons" (requested by Mohammad).
Thank you so much!


 
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Mat

unread,
Apr 13, 2021, 5:55:40 AM4/13/21
to TiddlyWiki
@morosanue - Thanks for update 

@Mat I couldn't find a simple (wikitext based) solution for importing a batch of icons by drag'n'drop. Sorry.

Thanks for trying. Could you formulate the specific problem with it in technical terms so maybe someone can help out? I'd think many people would find direct DnD very useful, instead of having to download etc. One idea might be to apply a temporary (how?) tag to the selected tiddlers and have this tag presented in the left column, i.e since tags are directly draggable. Maybe the drop mechanism could then remove the tag. (Personally, it the simplicyt with DnD would even outweigh the drawback of a tag that was not removed automatically.)

<:-)

moros...@gmail.com

unread,
Apr 13, 2021, 6:41:36 AM4/13/21
to TiddlyWiki
@Mat Hey, I didn't know that tags can be used with drag'n'drop functionality! I really didn't know it! Now that I know this let me try again. 

Saq Imtiaz

unread,
Apr 13, 2021, 6:50:42 AM4/13/21
to TiddlyWiki
Both the Button widget and the Draggable widget can be used to drag and drop tiddlers, as assigned by a filter. The advantage is that you don't need to tag tiddlers just to be able to drag and drop.

Assuming the Export button is created with a Button Widget, it can be assigned a dragFilter and be used for drag and drop.

moros...@gmail.com

unread,
Apr 13, 2021, 7:28:27 AM4/13/21
to TiddlyWiki
@Saq Thanks! What a simple solution! I never used it so it didn't pop in to my eyes when I searched the docs.
@Mat I've already implemented this functionality. It will be published soon.

Mat

unread,
Apr 13, 2021, 12:27:00 PM4/13/21
to TiddlyWiki
@morosanue - wonderful!
@Saq - thanks!

<:-)

moros...@gmail.com

unread,
Apr 13, 2021, 4:51:07 PM4/13/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.5 (https://morosanuae.github.io/tw-icons). Now with a total of ~38000 icons (15 libraries).

Features:
  • 2 new libraries added: "Jam", "Zwicon".
  • The selected icons can now be exported/imported by drag'n'dropping the export buttons into the target wiki. The download functionality remains (by clicking). (requested by Mat).
For more info, please checkout the "version history".


Joshua Fontany

unread,
Apr 13, 2021, 5:05:33 PM4/13/21
to TiddlyWiki
Great work on this so far!

Best,
Joshua Fontany

Mat

unread,
Apr 14, 2021, 8:47:49 AM4/14/21
to TiddlyWiki
Wonderful @morosanuae

It would probably be useful with some words below the selected icons like 

"Use the import buttons above or drag and drop icons directly into your TiddlyWiki"

<:-)

TiddlyTweeter

unread,
Apr 16, 2021, 6:02:54 AM4/16/21
to TiddlyWiki
Caro morosanuae,

You already know I think it is BRILLIANT!

     v1.5 (https://morosanuae.github.io/tw-icons). Now with a total of ~38000 icons (15 libraries).

A couple of (minor) points ...
  1. Might be a good idea to have a start-up on screen message to announce it is loading. It is exceptionally efficient once loaded! BUT load can be slow. On mobile phone it can be pretty slow to start.
  2. I was wondering if you could give a note of how to initiate a search of it remotely? What I mean is a user might initiate a search for a particular type (e.g. "arrow" or "circle") and find them already filtered on arrival? Possible? Just a thought to ice the cherry! :-)
Very best,
TT

moros...@gmail.com

unread,
Apr 16, 2021, 2:45:38 PM4/16/21
to TiddlyWiki
@TT Hello!

1. I will add a loading screen (in the next version), but this will not improve the loading speed ;). I have a fast computer and for me the loading is quick. Anyway, I didn't design the app for the mobile devices, so it's not very adaptive also.
2. I don't think this is possible. This is a front-end app not a server app. That means that all the processing (including search) is done locally on the client device AFTER the app is loaded on the client device (memory). But I'm not very updated with the latest advances in web technologies, so it's not a definitive answer. Maybe others know a solution, but this will not be easy IMO.

TiddlyTweeter

unread,
Apr 17, 2021, 6:25:39 AM4/17/21
to TiddlyWiki
Ciao morosanuae,

@TT Hello!

1. I will add a loading screen (in the next version), but this will not improve the loading speed ;). 

Right. Good! 
The performance, once loaded, is stellar so no issue. 
On phone too. It is only load-time that is a VISUAL issue ... just being aware it IS loading.

Best wishes
TT

TiddlyTweeter

unread,
Apr 17, 2021, 6:38:12 AM4/17/21
to TiddlyWiki

... I didn't design the app for the mobile devices, so it's not very adaptive also.

Right. But actually in Landscape on a smartphone it is actually well usable. 
Layout breaks a bit but otherwise it is perfectly functional ... for example (on my Android 8 phone) ...

Screenshot_20210417-121851.png

Of course, because smart phones are "touch" devices, TW drag-n-drop is not able to function properly as the OS overrides the browser. 
BUT simple export works FINE on a smart phone.

Just comments
TT

moros...@gmail.com

unread,
Apr 20, 2021, 8:50:22 AM4/20/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.6 (https://morosanuae.github.io/tw-icons). Now with a total of ~43000 icons (16 libraries).

Features:
  • 1 new library added: "Phosphor Icons".
  • Added a loading (splash) screen — a lighter version of the original TiddlyWiki splash screen . (requested by TiddlyTweeter).
For more info, please checkout the "version history".

Mohammad Rahmani

unread,
Apr 20, 2021, 9:05:58 AM4/20/21
to tiddl...@googlegroups.com

One the best resources for Tiddlywiki!

Thank you Morosanuae!


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

moros...@gmail.com

unread,
Apr 20, 2021, 3:13:01 PM4/20/21
to TiddlyWiki
@Mohammad You're welcome!

moros...@gmail.com

unread,
Apr 20, 2021, 5:32:25 PM4/20/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.7 (https://morosanuae.github.io/tw-icons). Now with a total of ~44000 icons (17 libraries).

Features:
  • 1 new library added: "CoreUI Icons".
For more info, please checkout the "version history".

TW Tones

unread,
Apr 20, 2021, 7:30:47 PM4/20/21
to TiddlyWiki
Thanks  Morosanuae  for this wonderful resource.

Is it safe to use and distribute tiddlywikis using this icons, without further attribution?

Regards
Tones

TW Tones

unread,
Apr 20, 2021, 7:49:23 PM4/20/21
to TiddlyWiki
Morosanuae,

You may with to add from tiddlywiki 5.1.23 if you add xmlns="http://www.w3.org/2000/svg" after the opening svg tag, and set the tiddler type to image/svg+xml the svg icons can be used as a $:/favicon.ico

Tones

moros...@gmail.com

unread,
Apr 21, 2021, 2:00:46 AM4/21/21
to TiddlyWiki
@Tones You're welcome!

"Is it safe to use and distribute tiddlywikis using this icons, without further attribution?"
I think so, but please check the "Credits" tiddler to see the license type for the libraries you're planning to use, to be sure. Some may require attribution.

"You may with to add from tiddlywiki 5.1.23 if you add xmlns="http://www.w3.org/2000/svg" after the opening svg tag, and set the tiddler type to image/svg+xml the svg icons can be used as a $:/favicon.ico "
Thanks for the tip! I didn't know that. I'll add this in the "TW Icons" documentation page in the next version.

Mohammad Rahmani

unread,
Apr 21, 2021, 3:00:08 AM4/21/21
to tiddl...@googlegroups.com
On Wed, Apr 21, 2021 at 10:30 AM moros...@gmail.com <moros...@gmail.com> wrote:
@Tones You're welcome!

"Is it safe to use and distribute tiddlywikis using this icons, without further attribution?"
I think so, but please check the "Credits" tiddler to see the license type for the libraries you're planning to use, to be sure. Some may require attribution.

"You may with to add from tiddlywiki 5.1.23 if you add xmlns="http://www.w3.org/2000/svg" after the opening svg tag, and set the tiddler type to image/svg+xml the svg icons can be used as a $:/favicon.ico "
Thanks for the tip! I didn't know that. I'll add this in the "TW Icons" documentation page in the next version.

That is right! svg icons in Tiddlywiki are SVG parts not svg images! I love this approach as I can simply transclude theme whenever I like and customize them!
BUT as Tones said if you like to use SVG icons as image like background image and favicon they need to be a standard svg image not svg part!


 

moros...@gmail.com

unread,
Apr 29, 2021, 8:24:57 AM4/29/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.8 (https://morosanuae.github.io/tw-icons). Now with a total of ~45000 icons (18 libraries).

Features:
  • 1 new library added: "css.gg".
For more info, please checkout the "version history".

TW Tones

unread,
Apr 29, 2021, 7:25:01 PM4/29/21
to TiddlyWiki
Thanks for the update moros...@gmail.com

Given such an effective resource I was wondering if people could share their approach to choosing and installing icons, more about the why they use icons, selection processes, installation and where they are used?

I am interested in workflow, practices and strategies used by my fellow TiddlyWiki users around the use of images/icons.

Regards
Tones

Mohammad Rahmani

unread,
Apr 29, 2021, 11:22:34 PM4/29/21
to tiddl...@googlegroups.com
Hi Morosanuae!
  Thank you for the update!  


Best wishes
Mohammad


Mat

unread,
Apr 30, 2021, 1:18:03 AM4/30/21
to TiddlyWiki
Thank you Morosanuae. That last library contains a particularly good selection for the types of "utility" stuff that I usually create.

<:-)

TiddlyTweeter

unread,
Apr 30, 2021, 3:20:50 AM4/30/21
to TiddlyWiki
Ciao TW Tones & morosanuae

 TW Tones wrote:
Given such an effective resource I was wondering if people could share their approach to choosing and installing icons, more about the why they use icons, selection processes, installation and where they are used?

I do AGREE with that! :-) 
Effectively using such a vast, rich, resource that morosanuae created will benefit, I think, from a secondary literature on HOW ones integrates new icons.

What I am wondering is if morosanuae would be interested in enabling a GitHub Discussion at https://github.com/morosanuae/tw-icons where such specifics could be discussed? 

It would NOT need him directly involved much, but I do think this kind of leverage of a great resource needs a home in order to progress.

Thoughts!

Best wishes
TT

Stobot

unread,
Apr 30, 2021, 7:58:04 AM4/30/21
to TiddlyWiki
I'm a big fan of this moros... thanks again for putting it together. I am using these for UI purposes too. I'm picking a single library in order to have some consistency. 

Now I'm relatively new to CSS and SVG for that matter, but from a consistency / usability of UI purpose I'm particular interested in the flexibility of these icons. Some of these appear to be "more flexible" than others, and maybe that'd be a useful distinction to add to the site. What I mean by that is the "parameterized" values in the SVG. For example if I search for bell, I get a couple of options:

There's bootstrap's bell ($:/images/bootstrap/bell)
<svg width="22pt" height="22pt" class="tc-image-bts-bell tc-image-button" viewBox="0 0 16 16"><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/></svg>

And then there's tabler's bell ($:/images/tabler-icons/bell) - perhaps my favorite library so far
<svg width="22pt" height="22pt" class="tc-image-tbi-bell tc-image-button" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>

The cool part here is that in the tabler set, I can go in and change the stroke-width with a text reference like {{$:/custom/ui/icons!!stroke}}, do that for all the icons and play around with a global setting. I don't know if there's a CSS way to do that also, but I think that's really cool. 



moros...@gmail.com

unread,
Apr 30, 2021, 3:41:35 PM4/30/21
to TiddlyWiki
Hi to all and many thanks for your compliments!

@TT I have nothing against your proposal. The problem is that I don't know much about GitHub Discussions. I've enabled this feature but don't really know what to do next. And as you guest it already I don't have much time to get very involved in this, although I'm very interested on the subject. So, a little help is needed.

@Stobot Interesting. I don't really know a lot about SVG format and structure. I try to preserve the original structure and content as much as I can in the process. The question is can we make all the icons "more flexible" by adding standard parameters like "stroke-width", "stroke" or "fill" to all the icons?

TiddlyTweeter

unread,
Apr 30, 2021, 3:53:42 PM4/30/21
to TiddlyWiki
@TT I have nothing against your proposal. The problem is that I don't know much about GitHub Discussions. I've enabled this feature but don't really know what to do next. And as you guest it already I don't have much time to get very involved in this, although I'm very interested on the subject. So, a little help is needed.

Tx!  I will post a discussion idea to https://github.com/morosanuae/tw-icons/discussions in a few days when I have more time (I know what it means to be too busy :-). 
FWIW I found GitHub discussions generally very productive because they tend to keep discussion well focused I think.

Best wishes
TT

Stobot

unread,
Apr 30, 2021, 5:10:32 PM4/30/21
to TiddlyWiki
Sorry I was vague @monosanuae, the comment was mostly related to @Tones's call to talk about how they use them, etc. I was hoping to either:
- Learn if there was a way to add a general CSS class that would override the detail in the SVG, like stroke-width
- Spur idea on expanding on the CSS against SVG concept. Think about how there's one spot in settings where you can pick a font and font size. Imagine there was ALSO a spot where you could change things like stroke-width and colors for all "icons" - it kind of plays into themes etc. I can get pretty close if I take only the SVG files with a stroke-width and stroke-color parameter where I can use a text-reference, and then add a settings area. 

The suggestion to your creation was just that *if* there are other people like me that want to consider the functionality then it might be interesting to be able to browse by "feature" of the SVG. I may very well be the only one in the world who thinks that's a neat idea, so was interested to see if that went anywhere. 

Thanks again!

morosanuae

unread,
May 3, 2021, 4:23:57 PM5/3/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.9 (https://morosanuae.github.io/tw-icons). Now with a total of ~46000 icons (22 libraries).

Features:
  • 4 new libraries added: "Dripicons", "Entypo+", "Octicons" and "Open Iconic".
For more info, please checkout the "version history".

Mohammad Rahmani

unread,
May 3, 2021, 4:41:55 PM5/3/21
to tiddl...@googlegroups.com
Lovely! Thank you for sharing!
A big surprise is you have around 48000 tiddlers in single file as big as 56 MB
and it's quite speedy!

Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Mat

unread,
May 3, 2021, 4:45:30 PM5/3/21
to TiddlyWiki
AND I note that...

 New! Now you can drag the export button into your wiki to import the selected icons more easily

Morosanuae, your site iconic in itself!

<:-)

morosanuae

unread,
May 3, 2021, 5:40:18 PM5/3/21
to TiddlyWiki
@Mat thanks! I'll leave the announcement for a while (not for a long time though) because I think this is a fairly important feature and it doesn't deserve to be missed. Anyway, you had a great idea!

@Mohammad I'm not sure how much more can take it though... As I said before I have a fast PC so the speed of the site it's not a problem for me, but maybe for other is (or it will become eventually).

TiddlyTweeter

unread,
May 5, 2021, 12:02:11 PM5/5/21
to TiddlyWiki
Ciao cari,

I have started a discussion thread on usage of TW Icons here: https://github.com/morosanuae/tw-icons/discussions/2

I think it will be useful for real usage. 

Take a look at least. Do comment if you can.

Best wishes
TT

morosanuae

unread,
May 6, 2021, 7:35:51 AM5/6/21
to TiddlyWiki
Hello to all,

If you want to contribute (mainly sharing opinions and experience) in the process of improving the "TW Icons" SVG collection I invite you to participate to the discussions started by @TiddlyTweeter on https://github.com/morosanuae/tw-icons/discussions

morosanuae

unread,
May 7, 2021, 8:27:59 AM5/7/21
to TiddlyWiki
A new version of "TW Icons" is available !!!

v1.10 (https://morosanuae.github.io/tw-icons). Now with a total of ~47000 icons (25 libraries).

Features:
  • 3 new libraries added: "Feather", "Forge Icons" and "IcoMoon Free".
For more info, please checkout the "version history".
Reply all
Reply to author
Forward
0 new messages