[request] More general icons - as plugin

[twMat]

Edit: I'm thinking that maybe this should be in an official plugin instead.

---

The current icon set is rather special but when building plugins and just for visual efficiency, I often need more general icons. Not that many - but the need keeps recurring.

I typically resort to ugly UTF-8 characters. People less willing to search probably resort to even uglier regular characters like > to signify arrows.

Proposal: Add some more basic svg icons.

Examples (sorted by my personal order-of-needs)

◁ ▷ △ ▽ - useful for revealwidgets and similar

● ⚬ - bullets, at least one of them should be styled like the default bullets in the list-links macro so one can emulate this

☐ ☑ ☒ - checkboxes. On my screen one of these displays inside a stupid blue box, which just goes to show the need for actual images

] [ } { > < ) ( - i.e typical TW brackets because in documentation it is not always desirable to use real-but-backticked characters because these get styled.

← ↑ → ↓ - svg's should probably be more distinct than these

⦿ ⦾ - radio buttons

#3436 - symbols for external link and tiddler link

⋯ ⋮ - symbols for "more" but also for "list"

[AnthonyMuscio]

twMat,

I would support the addition of some full svg icons, we have some important ones missing but it should only be a few essential ones for space reasons.

When you say ugly UTF-8 characters are you refering to all those we can find at https://www.w3schools.com/charsets/ and https://www.copypastecharacter.com/

My only issue is ensuring they look large enough.

Here is a small sample I use in TW5 (using the Pre-release feature of range)

<table>
<tr>
<th>Number</th>
<th>Symbol</th>
<th>Code</th>
</tr>
<$list filter="[range[33, 9999]]" variable=number>
  <tr><td><<number>>:</td><td><$macrocall $name=display-symbol number=<<number>>/></td><td> &#<<number>>;</td></tr>
</$list>
</table>

[twMat]

(that's an overly long post)

it should only be a few essential ones for space reasons.

yes, this is why I added this:

Edit: I'm thinking that maybe this should be in an official plugin instead.

Actually, the ideal would not even be a plugin but individual such official icons that one could drag'n drop into ones TW on demand.

[AnthonyMuscio]

twMat,

I agree about providing a repository of icons from which we can get additional ones to use just like the core ones, really popular ones may move to the core one day. I suppose there needs to be a little caution not to break copywrite. I will attach three I made using variations of existing icons as a case in point, and with no resulting copywrite.

New tiddler here with parent field
Subtiddler here eg; currenttiddler/subtiddler
New Branch here

new-here-with-parent-button.zip

Regards
Tony

[jho1965us]

@twMat Do you know about the fontawsom plugin? https://thediveo.github.io/TW5FontAwesome/output/fontawesome.html
Havent used it for a while though

[twMat]

@jho1965us , I appreciate your kind help and, yes, I know about it.

The proposal here is just a set of icons that

• is very limited in numbers and that is often needed in a TW context
• follow the established TW format and style
• and that they're either in the core or an official TW plugin so everyone can find them

[TiddlyTweeter]

@twMat I very much agree with your initial post. I want to make a couple of points in support ...

UNICODE for regular icons should be avoided. The problem is you can't predict the exact look as it depends on user fonts. That seriously breaks reliable thematic styling.

All main interface icons IMO should be SVG.

But whilst SVG is a brilliant format that is now very robust it can be seriously confusing creating one from scratch if you don't understand the format--its math is quite difficult to grasp. So I am in favour, like you, of a small expansion in the current default library properly made by people who know what they are doing. I think that is the best solution by far.

My two pence
Josiah

[TiddlyTweeter]

@jho1965us FontAwesome is excellent. But its better in plugin territory than in the core.

One issue with FontAwesome for Icons, by the way, is that NOT all the glyphs are perfect squares. Basic icons need regularity of sizing.

BUT, there are ports of FontAwesome to SVG that might be used as a basis for new TW icons.

[AnthonyMuscio]

Josiah et al, I think I understand why you say "its better in plugin territory than in the core" but I would add it's better in a json "bundle" file than in a Plugin because whether you use it or not it will still consume space and you can delete them individually.

• Also I think there is value having them packaged with a prefix such as $:/FA/images/name.svg so they do not appear in tiddler searches.
• I suggest we ensure that all packaged have a default height="16px" width="16px" or an agreed standard value so they need not always have their size specified. What size do you think?
• Perhaps we could even pre-load them with a keyword field so we can search for icons to represent things with words. and a set field with set names such as media, files, folders etc... Or even (system) tags with the set name?
• I am also proposing a change to the import mechanism that will allow intervention before import so you can select the separate images with a preview and only import those.

I made a quick list of useful images which extended quickly to 115 images.

As a result I see this as a case of making use of a community site in tiddlywiki where people can provide there own selected sets that anyone can export as needed.

If we can agree on the default Size I am happy to make a FontAwesome Bundle, If someone can determine what licensing notice we need please let me know.

[telmiger]

Maybe several plugins might be a better idea, e.g.

1. Arrows
2. Pseudo form elements

The issue might be more complex if we want to consider accessibility: The alt-text for { would simply be "{" but "right pointing arrow" needs translations. (I don’t know how accessible FontAwesome is today. It might depend on what you use it for.)

I once made a non official plugin for Harvey Balls that might be useful for reference.*

Considering accessibility and my personal experience I am unsure if pseudo form elements should be implemented at all. People are used to browser specific designs (list bullets too, there are no TW default bullets, only browser default bullets!) and it is really not easy to restyle form elements (not emulate/fake them) using graphics and CSS without losing accessibility. And if you are able to do that you might be able to draw your own icons and you might want to implement your own style instead of default TW style.

• https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FHarveyBalls

[twMat]

@telmiger

Maybe several plugins might be a better idea, e.g.

Frankly, IMO individual icons are better than any number of plugins. When you need an icon, you need that icon, not the other ones. So, as usual in tiddlyverse, the difficulty is really about accessibility, i.e where the icons are hosted so they can be easily found. From a user point, the obvious place would be a subdomain or subdirectory to tiddlywiki.com. (But then, as usual, what we really need is a place that doesn't rely on a single individual and where the community can contribute and curate etc.)

[twMat]

bump

This is really needed for hackability. It is not straightforward to get icons elsewhere and have them work well in TW. Currently one has to compromise by reusing icons where the meaning is not correct. It can also be confusing if icons have different meanings in one wiki.

[morosanuae]

@twMat Did you look at http://fa5-free-svg.tiddlyspot.com? The images are formatted just like original TiddlyWiki ones. You can import just one, or several at once with batch functionality.

[twMat]

@morosanuae , I did forget about that. Still I think the basic icons brought up in the OP should be more directly available. If not in the standard distro then via official TW sources. Maybe the need will diminish if there's an official Community Plugin Library.

Also in your otherwise great site, I surprisingly can't find quite a few of the ones that I bring up in the OP. Maybe I'm too un-imaginative to come up with the correct search terms but I can't find equivalents to these:

◁ ▷ △ ▽
● ⚬
] [ } { > < ) (
⋯ ⋮

[morosanuae]

@twMat although the collection doesn't have everything that you need, I've managed to find some of your desired icons.
◁ ▷ △ ▽ - search terms: "caret" (but only full not outlined)
● ⚬ - search terms: "circle" (although not small)
< > - search terms: "chevron", "angle", "than" (the one you prefer)

These are only the SVGs available in the free version of Font Awesome 5. But there are many sites with free images, they just need to be converted to TiddlyWiki format and uploaded publicly. I'm planning to create another site with a more complete collection of images from different sources soon. You can contribute if you want.

[morosanuae]

@twMat
⋯ ⋮ - search terms: "ellipsis"

[TiddlyTweeter]

@morosanuae

I'm planning to create another site with a more complete collection of images from different sources soon. You can contribute if you want.

What you did with the Font Awesome in SVG format at http://fa5-free-svg.tiddlyspot.com/ is BRILLIANT!

The idea of adding more SVG images in a TW-Ready format is a good one too! Particularly as the delivery mechanism of your current site is an ideal model, so I'm sure anything you created would work as well as any user could possibly need.

I think what this discussion, particularly with @twMat, illustrates is that "end user needs" on icons are honed to quite specific iconology. Briefly, I think it is difficult to address such needs fully. Why? Because end-use is often highly specific in its requirements and off-the-shelf icons to match are a lot rarer than you think would be the case---until you actually have to solve the issue :-).

I have a suggestion ...

• Ask on the main GG list and on this Jermolene group under discussions for REQUESTS of what icons folk actually need.

I think might help give a focus.

• On helping you. I would be crap on the conversion to TW-Ready SVG format. BUT I am willing to trawl SVG libraries to try find suitable candidate items that are clearly wanted.

Best wishes
TT

[morosanuae]

@TiddlyTweeter

I think what this discussion, particularly with @twMat, illustrates is that "end user needs" on icons are honed to quite specific iconology.

I know that because I also use a lot of icons in my projects and I know from my experience that the Font Awesome 5 Free collection is not enough. I often go to other libraries/sites as well, just like other users.

Briefly, I think it is difficult to address such needs fully. Why? Because end-use is often highly specific in its requirements and off-the-shelf icons to match are a lot rarer than you think would be the case---until you actually have to solve the issue.

I don't actually worry about that. I don't intend to resolve every user needs, it's practically impossible. But I think that an ever growing library (with the help of other interested users) will gradually satisfy most of the regular needs without too much effort. This is the same with the Font Awesome library, even with the paid version. No library on the internet will satisfy all the users needs. Sometimes users will have to work for themselves a little bit.

Ask on the main GG list and on this Jermolene group under discussions for REQUESTS of what icons folk actually need

I don't think we need to do that. The power of the automation is useless on several icons. The solution is to process hundreds or thousands in batch. That way we don't need to worry to much about specific use cases. Many of the needs will be satisfied by default by the sheer number of icons.

BUT I am willing to trawl SVG libraries to try find suitable candidate items that are clearly wanted.

THIS is the main problem we need to resolve. I need material to work with. Someone will have to find downloadable resources. Preferably downloadable in batch (archive, list etc) just like Font Awesome, otherwise it will be very difficult. Unfortunately not all sites/libraries allow that and this is the main obstacle.

[twMat]

THIS is the main problem we need to resolve. I need material to work with. Someone will have to find downloadable resources.

Ol' bookmark for site that I recall thinking "this will be useful some day"

https://leungwensen.github.io/svg-icon/
with the matching github repo
https://github.com/leungwensen/svg-icon

[morosanuae]

@twMat all right. I will inspect this source and I'll come back with feedback. Looks promising. Thanks.

[joshuafontany]

I have also been playing with bulk-importing, using @morosanuae 's demo-wiki as inpiriation. I have FA5 and "GameIcons.net" libraries scraped and nearly ready to import into TW: https://github.com/joshuafontany/TW5-SVG-Scripts

[morosanuae]

@twMat and others, the source indicated by @twMat is good. I'll start working on it soon.

[TiddlyTweeter]

@morosanuae ... the source indicated by @twMat is good. I'll start working on it soon.

I agree. The site looks like you can BULK download. And the Github repository for it also looks easy to work with.
FWIW, the site has a big collection of the Google Material Design icons (935) which are otherwise cumbersome to download in a batch (i.e. compared to https://material.io/resources/icons/?style=baseline)).

Let us know how it goes & if you need more pointers!

[morosanuae]

@joshuafontany I don't use node.js for batch processing. I use Windows 10 PowerShell.

[morosanuae]

@TiddlyTweeter ok. I'll let you know. Thanks.

[morosanuae]

I've managed to successfully process a large number of icons, over 8000. Unfortunately, several thousands are not following the standard and they require additional, more complex processing, so they were not included.
I want to make this set of icons available in a simple manner, but the TiddlySpot service is damaged. I've tried a free hosting solution but there was a file size limit. I don't have time for GitHub now. Any solutions?

[AnthonyMuscio]

I want to make this set of icons available in a simple manner, but the TiddlySpot service is damaged. I've tried a free hosting solution but there was a file size limit. I don't have time for GitHub now. Any solutions?

I can host most content as needed under one of a number of domains I have.

[AnthonyMuscio]

One distribution method I have not yet seen used, is to download a plugin from a library of say thousands of SVG's and provide a browser tiddler, then as the designer selects the tiddlers they wish, simply add a tag or time stamp or other value to each selected svg tiddler such they become tiddlers, rather than only plugin shadows. At this point the original plugin can provide a method to generate a new plugin of only the selected svgs.

Whatever you do at the end just remove the plugin and all the selected svg's remain in the wiki, and the unused one removed.

An even smarter tool could detect if and when svgs are names/transcluded anywhere in the wiki as shadow tiddlers and "extract" them automatically from the plugin by making them tiddlers. then you could just load a plugin of svgs during design, use as few or many as you need, and automatically create a copy of only used svg's before deleting the plugin.

Not withstanding the above we could quickly identify a few dozen additional icons of high functional use within tiddlywiki and add as a core optional plugin!

Regards
Tones

[TiddlyTweeter]

@morosanuae... I want to make this set of icons available in a simple manner, but the TiddlySpot service is damaged. I've tried a free hosting solution but there was a file size limit. I don't have time for GitHub now. Any solutions?

@AnthonyMuscio... I can host most content as needed under one of a number of domains I have.

Sounds good! If there are any hiccups I can let you use my Dreamhost account (not the fastest for large files) at an address like: https://tidbits.wiki/morosanuae if needed. SFTP would be the upload protocol.

[pmario]

@AnthonyMuscio Hi Tony, ... Have you seen my last post. I'm promoting the local-storage plugin ;)

[pmario]

... Why would anyone want an edition like that, as opposed to merely a plugin?

It can think about a plugin, that contains eg up to 100 icons, that are very common. But still if I only need 1 or 2 icons for one of my projects. Why should I want to add an other 98, that are mostly useless.

[morosanuae]

Hi guys and thanks for your feedback/help. I've read all the post but I don't have time to respond to each and every one. So here are my thoughts:

1. @AnthonyMuscio, @TiddlyTweeter and @pmario I'm looking for a hosting space that I can manage myself, because there will be a lot of updates/modifications. I've acknowledged your proposals and I'll keep them in mind as a last resort. Thank you.
2. A plugin version is not a good thing as @pmario said. No one would want 8000 icons just sitting around and severely degrade system performance.
3. I think a dedicated downloadable edition that will include the entire icon library would be nice.
4. I'll try a GitHub solution first, but because I'm not an expert in it I guess it will take a little longer.

See ya later!

[twMat]

@pmario + @morosanuae
Edition - OK, so maybe it'll be an edition that one can just visit and pluck the desired icons from. That'd be excellent.

@morosanuae

4. I'll try a GitHub solution first, but because I'm not an expert in it I guess it will take a little longer.

The recommendation I got was to use @kookma 's github thing. (I personally fiddled a failed two weeks ago.) I hope you'll be up in zero time and can chime in with everyone else so says it "soooo simple". (Which I have found to really mean "it is sooo simple... if you know how to do it".)

[morosanuae]

Here they are: https://morosanuae.github.io.
It's just a temporary demo site, the URL and the site will change in the near future.

[morosanuae]

Important! The new URL is: https://morosanuae.github.io/tw-icons

[TiddlyTweeter]

Important! The new URL is: https://morosanuae.github.io/tw-icons

Really useful! Small point. For some purposes it might be useful to also be able to filter by "library" to reduce the items presented (e.g. [field:library[weather]]). Just a thought.

[morosanuae]

Hi guys, please, check out the new version: 0.2-alpha (https://morosanuae.github.io/tw-icons)

v0.2-alpha

• Added version history
• Changed the export mechanism and design
• Added paging functionality for the icons gallery (for usability and improved performance)
• Changed the overall design of the site
• Other minor improvements

It's still in development so if you run into problems please let me know!

@TiddlyTweeter

Really useful! Small point. For some purposes it might be useful to also be able to filter by "library" to reduce the items presented (e.g. [field:library[weather]]). Just a thought.

I will in the next version.

[Jermolene]

Important! The new URL is: https://morosanuae.github.io/tw-icons

Great stuff @morosanuae, very nicely done. We should add a link at tiddlywiki.com.

[TiddlyTweeter]

@morosanuae * Added paging functionality for the icons gallery (for usability and improved performance)

Good! The performance is vastly improved. The use is much more manageable.

[morosanuae]

Thank you all for your appreciation! It means a lot to me. I will keep improving the app, although I'm not very satisfied with the data itself (the icons). There is one big problem that I think cannot not be solved easily: some specific icons are not easy to find. @twMat complaints regarding my other site are an indicator of this. For example, an image depicting a lion exists in the collection but the icon name doesn't contain the word "lion" and also descriptive tags are missing. To find the "lion" icon one must visually parse the entire collection or by chance (if he searches for "zoo"). And this is a major drawback, that keeps the app becoming really useful. I wonder if the producers of the source SVG images have this kind of metadata. I know that Font Awesome collection has it because on their online platform I can find specific icons by using alternative keywords.

@Jermolene thank you for your appreciation. I will add a link soon, after a bit more testing.

[twMat]

@morosanuae - in deed a great update and overall a great creation!

I am cosing this thread because it is an Issue (as opposed to a Discussion) and I now find it sufficiently solved - but we can still continue to discuss here or in a new dedicated Discussion thread if anyone starts one.

image depicting a lion exists in the collection but the icon name doesn't contain the word "lion"

I think the optimal solution would be a system that allows visitors to add tags to the hosting site, and even vote (up/down) on existing tags. This is obviously way beyond your wonderful creation.

[twMat]

@kookma - I just realized that what I wrote a few posts up about github can be misunderstood:

... @kookma 's github thing. (I personally fiddled a failed two weeks ago.) I hope you'll be up in zero time and can chime in with everyone else so says it "soooo simple". (Which I have found to really mean "it is sooo simple... if you know how to do it".)

My irony about refers to how people say adding things to gh is simple, not about the thing you created. More than anything, my frustration is about my incompetence in this all.

[morosanuae]

@twMat Thanks a lot! I'm glad I've managed to resolve your request even though only partially. Anyway this is a problem that doesn't really have an end. It will always be a constant need, for a better, bigger and accessible imagery collection.

I think the optimal solution would be a system that allows visitors to add tags to the hosting site, and even vote (up/down) on existing tags.

I thought about that myself but I think it's very clear for everyone that we don't have that system. We have a general problem regarding contributions.

I am cosing this thread because it is an Issue (as opposed to a Discussion) and I now find it sufficiently solved - but we can still continue to discuss here or in a new dedicated Discussion thread if anyone starts one.

You're right! I also think we should create a "Discussion" for this matter. As I said earlier, there will be a constant need for icons and so we should have a place for requests and other stuff.

More than anything, my frustration is about my incompetence in this all.

The problem here is not incompetence. Everywhere I go I see poor written documentation that doesn't help you very much but on the contrary and poor written software (including GitHub) also. For example, I had problems publishing the site. Because some internal redirection problem that doesn't really get resolved for years, the site was not accessible and I had to search for a solution on the internet. This is the way things work today.

[kookma]

@kookma - I just realized that what I wrote a few posts up about github can be misunderstood:

... @kookma 's github thing. (I personally fiddled a failed two weeks ago.) I hope you'll be up in zero time and can chime in with everyone else so says it "soooo simple". (Which I have found to really mean "it is sooo simple... if you know how to do it".)

My irony about refers to how people say adding things to gh is simple, not about the thing you created. More than anything, my frustration is about my incompetence in this all.

Hi @twMat - no problem. I understand what you meant.

[morosanuae]

A new version: 0.3-beta (https://morosanuae.github.io/tw-icons)

• Added page count to paging functionality
• Added option to select the maximum number of icons displayed per page
• Added filtering by category
• Added status info (current page number and the number of icons displayed on page)
• Changed the layout of the image gallery header
• Other minor improvements

[twMat]

@morosanuae , very good stuff. Here are two issues:

1. The page is too wide which forces side scrolling or zoom out.

[morosanuae]

@twMat can you tell me what is your screen resolution? I designed it on my screen resolution which is 2560x1440. I also want to make it more responsive in the future.

[morosanuae]

@twMat I've made a few tests. On 16:9 resolutions (like mine) the horizontal scrollbars appear only on low resolutions (from 1280x720 downward). Do you use such a low resolution? Anyway the site is not designed with small devices in mind (smartphones or tablets). At least not for know. I was aware of the second problem and will be resolved soon. I just need to figure out the best solution.

[twMat]

I'm using my pocket calculator to view it. Is that not good? OK, just kidding. Here are my Win10 laptop screen settings. (Note that this screen snip looks totally oversized/zoomed-in because of githubs way to epxand images to fit message width, it has nothing to do with my settings):

...and here are my Chrome settings

In cases where I've had undesired X scroll, I've used max-width: 100 vw;. In some cases

[morosanuae]

@twMat

I'm using my pocket calculator to view it. Is that not good?

Of course not! It's too powerful. You're wasting precious system resources. Keep it just for basic arithmetic. ;)

Here are my Win10 laptop screen settings.

The problem it's not the resolution. The higher scaling of the screen (150%) is the problem. Horizontal scrolling bars don't appear on 125% scaling. Anyway if this is your preferred setting we should adapt the site. I'll see what I can do.

[twMat]

The higher scaling of the screen (150%) is the problem.

Yes. I do prefer this - but note that it is also the setting that windows recommends so it is likely default and thus probably also used by many other people.

[morosanuae]

A new version: v0.9-beta (https://morosanuae.github.io/tw-icons)

@twMat Can you test it a little bit and tell me if it's better now? Thanks.

[twMat]

Quick test of (only) the things I brought up: Looks great! :-)

[twMat]

funny nitpick: I misread "Page 1 -- 500 ..." as "Page 1 out of 500" so I was thinking "Damn! Dats crazy many icons!"

[morosanuae]

@twMat :) Yes, I think it's a bit misleading. If you know a better way to represent this info please tell me. Thanks.

[twMat]

Maybe just sqeeze in some empty space there? Just a thought, i.e instead of the em dash.
But let me be clear: You've created a terrific site and service for the community!

[morosanuae]

@twMat I've just moved things around a little bit eventually. Maybe it's more clear now. Anyway I'm relying on you to tell me if you discover more problems ;)

But let me be clear: You've created a terrific site and service for the community!

Thanks a lot! It's really a pleasure to develop in TiddlyWiki. It's such a nice, powerful and versatile app. And I also know the importance of user's contributions in an open-source project like this.