TiddlyWiki 5 core icon development

#21

The Feather Icon pack is now done. You can check this site for more information !

4 Likes
#22

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.

#23

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 :confused:

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)
"""
#24

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

@Justin_H just ask me and the community when you want more info of for specific cases.

#26

@TW_Tones,

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. :sweat_smile:

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

#27

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