Same thing here, with extra 
for <<.icon>> which integrates icons nicely in a flow of text.
Fred
Would TiddlyWiki ever adopt a (sub)set of icons from one of the popular open source icon collections instead of using its own icons?
https://icons.getbootstrap.com/ and https://feathericons.com look nice. React Icons has a browseable list of other icon collections.
1 Like
I think we do have a very good source for as many (~47 000) icons we probably want: TW Icons v1.10 — A large collection of icons for TiddlyWiki
1 Like
There is also a plugin for Font Awesome.
I would also point out the ability to make use of Unicode.
While I enjoy messing about with icon design, I would have been happy to use existing icons back in 2011/2. The problem was that at that time the state of the art was to use “icon fonts”, which we were just discovering to have significant problems with accessibility.
I wanted to use inline SVGs so that we could style the icons with CSS. At the time, it was not a well-known technique and icons were not readily available in that format. Nowadays, icon fonts have fallen out of favour, and it is common for icons to be distributed as SVG images. Some of the libraries support inline SVGs, but not all of them.
At this point I’m not sure whether it would be worth switching from the existing icons. Perhaps a precursor is that I’d like to see plugins containing icon packs that overwrite the core icons.
5 Likes
Makes sense to me. And thanks for the back story. (This sounds like another example of TiddlyWiki being ahead of its time. 
)
I am actually doing an ntegration of feather icons to TW. I"m halfway I think. But it looks pretty nice. And give a fresh look to our beloved piece of software.
2 Likes
Inkscape is the go-to open source vector graphics editor. Doesn’t have a iOS app though, but works natively with SVG files in Windows, Mac and Linux.
It has in the latest versions become capable of batch exporting SVG files, which is great for icon work. You can setup multiple sheets of icons side by side for editing and reference, and batch export them to individual SVG files for later use.
1 Like
Ahh. I do use InkScape for a long time, but I did miss that feature. Thanks for sharing.
1 Like
Welcome @duarte.framos I played with this in the past, what is missing is a little documentation that covers the standards and formats etc… to generate/edit SVG’s that work in tiddlywiki.
For example I would love to bring in an existing button icon and modify it in inkscape and then generate a new icon tiddler.
I remember mucking about with Inkscape in the past to get it to write SVG files that would play nice with TiddlyWiki buttons and correctly inherit the builtin styles to blend into the wiki theme.
It was a while ago and I can no longer remember what I did, but I recall it took me some time to figure it out. It was nothing complicated though, just needed a little investigation for my limited understanding at the time.
If there’s any demand for it I could perhaps try and write some sort of guide on hot to use it.
Maybe it’d be interesting to compile some sort of community approved template Inkscape SVG file with all existing official icons ready for editing, so people could find it easy to either do their own, or contribute official ones.
2 Likes
Perhaps we can crowd source the result?
I will start a new thread and link here.
I think they look fantastic! I spend a lot of time looking for icons when creating plugins, and this looks very promising. I’m taking the opportunity to referring to an old post of mine - here - where I request some very “functional” icons that would be neat to have.
I’d like to offer an icon if that’s fine, I typically use SvgPathEditor (its a github webapp) when editing icons and I used to use illustrator for making them from scratch
$__core_images_folder-closed.json (686 Bytes)
I use this closed folder whenever I use the tree macro or the toc snippet, I just find it aesthetically appealing. It was just a small modification of the default core folder icon.
It would be pretty neat to have an extended icon pack of the graveyard icons as a plugin, maybe just to tinker with, if nothing else.
Also, for anybody that wants text svg’s maybe for toolbar btn’s theres a way to do that pretty easily, just doing the following below:
<svg class="tc-image-cent-character tc-image-button" width="22pt" height="22pt" viewBox="0 0 22 22">
<text x="5" y="20" font-family="Consolas" font-size="25" fill=<<colour foreground>> >¢</text>
</svg>
Edit: Actually- this doesn’t work fully, nevermind. seems like you can’t use the color macro with it 
Edit 2: Had a thought, since Tiddlers are meant to be modular and reusable, can’t we use SVGs in the same way? rather than having a single icon for each thing, having sets of predefined shapes that can be combined by just putting them one after another in a tiddler, such as
title: "$:/core/icon"
tags: "$:/tags/Image"
text: """
(text from $:/core/images/hexagon)
(text from $:/core/images/cat)
"""
Keep in mind with the release of TW 5.3.0 there are some additional features transcluding SVG image tiddler and allowing the size parameter. Although they appear fragile when used in tiddlywiki there is a science to the icons but it is easy to get confused. Svg operates similar to html when transcluded.
- I too have played with making icons that are just a republishing of Unicode charactewrs
- The toolbars include overriding css that permits on hover and seems to overide other attemps to customise icons, especialy if you want say conditional colors.
- You also need to adgust tiddlywiki svg tiddlers a little to make them a working $:/favicon.ico
One of the many hiccups I’ve run into when attempting to create modular svg’s is the alignment. What I tried in the past was storing the path within a tiddlers field and calling it as {{TiddlerTitle!!path}} which for all intents and purposes, works as intended (see below)
title:"$:/images/demo/calendar"
text:"""
<svg
class="tc-image-android-calendar tc-image-button"
width="22pt" height="22pt"
viewBox="0 0 384.010009765625 384"
>
{{$:/images/demo/calendar!!path}}
</svg>
"""
path:"<path d="M304.01 208h-96v96h96v-96zm-32-208v32h-160V0h-48v32H40C17.998 32 0 49.998 0 72v272c0 22.002 17.998 40 40 40h304.01c22.002 0 40-17.998 40-40V72c0-22.002-17.998-40-40-40h-24V0h-48zm72 344H40V132h304.01v212z"/>"
but if the svg wasn’t designed in exact size to the ones used with it, it results in misalignment, incorrect sizes, things that I’m not entirely sure how to adjust. (without redesigning the svg that is.)
So if you were to say, have the above be a rounded box, and then used the path of another icon, say a star, if the star isn’t aligned, welp- no good.
I do think it would be quite neat to use SVGs to just- create your own icons, maybe even allow for dynamic SVGs like what is done with the save icon, but instead you could just mix and match.
Got a bit off topic, anyways, alignment is one problem I’ve run into, another is using the color macro, as you probably can tell from above, I found out you can’t use it with that SVG letter trick, bit of a bummer if you ask me. 
Have you done anything along those lines to any success? I’ve seen the new procedures in v5.3.0 however I’m not that good with filters or more complex creations yet, and I would be lying if I said I would know what to use procedures for haha
I am still working through 5.3.0 and finding some aspects context sencitive, in ways I did not expect.
- I have placed the whole
<svg></svg>including the path in a simple field and transcluded that, then change the text or color in that field as needed. Since this is not a core practice it may frustrate some people trying to find the icon content.- I also change the size to 1em/1em to fit the context.
- One thing about alignment is the toolbar has its own css and this ensures alignment within the toolbar, you should be able to assign the same css with a little thought.
- I must admit, I have never fully come to terms with this despite many questions and helpful answers. You may find use searching for priior conversations here in talk.tiddlywiki useful.
1 Like