TiddlyWiki 5 core icon development

#1

Over in the thread about the v5.2.6 prerelease there has been some interesting discussion about the improvements to the “save wiki” icon.

I thought it might be interesting to share my workbook of the TW5 icons. I’ve been using a drawing app for the Mac called Sketch since 2011. It lets me keep all the icons laid out on a canvas, with an overlay to indicate the areas to be exported as image files. (Sketch is not as popular as it was, and I don’t use it for anything besides the TW icons, so I wouldn’t recommend it nowadays).

Here’s the main area, which shows the finished versions of most of the core icons, along with a number of icons for sideprojects and some ideas that haven’t (yet) come to fruition:

image
image1836×2212 204 KB

Here’s the graveyard area where I put ideas that didn’t seem to work. Amongst other things, it shows how many attempts it took to come up with a control panel icon that I liked!

image
image1692×1818 347 KB

Open the images in a new tab to see the full size image.

9 Likes
Now is the time to help with testing the TiddlyWiki v5.2.6 prerelease
#2

I think that is very useful to see!

Such a visual, synoptic, view really helps one think more clearly about design issues for end wiki better!

Grazie, TT

#3

If you were to move away from Sketch, what program would make sense for a replacement?

#4

I don’t use Sketch any more except when working on TW icons.

For the last few years I’ve been using the commercial (but non-subscription) vector app Affinity Designer, available on Windows, macOS and iPad. It’s powerful and fast but has a style of user interface that I don’t hugely love (lots of docked sidebars with inscrutable tiny icons everywhere, in a very low contrast colour scheme). The excellent, full featured iPad app is the main reason I chose it.

#5

Just wanted to say I really appreciate the icons in the core. I can grab an empty.html anytime and know I have some good icons to spruce up my content. I also typically copy over the doc macros so I can get <<.tip>>, <<.warning>>, and <<.note>> which I love using in my prose.

I am very much not a designer, my idea of a good design is SSH into a server! Having easy grab-n-go options is wonderful for me.

Thank you!

2 Likes
#6

I would like the community to develop a list of “Missing Icons” that should be in the core and a supplementary icons plugin. Once we decide on the icons we want people can submit suitable existing or designs and we can vote for those to go in the core.

  • Half a dozen may be all we need.
#7

+1 for Affinity Designer.

They quite often have a sale where you can save a few bucks on top of the huge savings you already get compared to subscription-only Adobe apps.

#8

Same thing here, with extra :hearts: for <<.icon>> which integrates icons nicely in a flow of text.

Fred

#9

You should try Inkscape super opensource app with svg as native format.

3 Likes
#10

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
#11

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
#12

There is also a plugin for Font Awesome.

I would also point out the ability to make use of Unicode.

#13

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
#14

Makes sense to me. And thanks for the back story. (This sounds like another example of TiddlyWiki being ahead of its time. :grin:)

#15

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.

feather TW
feather TW933×650 53 KB

2 Likes
#16

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
[Crowdsource] Using Inkscape SVG's with TiddlyWiki
#17

Ahh. I do use InkScape for a long time, but I did miss that feature. Thanks for sharing.

1 Like
#18

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.

#19

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
#20

Perhaps we can crowd source the result?

I will start a new thread and link here.