Easy way to add icons to your links (core icons, custom svg, base 64 and external images)

[telumire]

Hi everyone, I updated the previous solution I shared to make it easier to add new icons. With this, all you have to do is add the tag $:/tags/Image and the field domain set to the url you want to match, and the correct icon will be displayed next to your link. It’s like fontawesome, but better!

You can do this with core svg icons, with custom svg tiddler, base 64 image and external images (put your link into the _canonical_uri field). Multiple domains can be set for the same icon using the titlelist format.

https://demos.tiddlyhost.com/#External%20links%20icon%2FDemo

Example

I want to add a discord icon next to urls pointing to discord. Here’s how :

1. Search “discord svg” on google: Discord Icon Vector SVG Icon - SVG Repo
2. Download the svg then drag and drop the file in tiddlywiki
3. Add the tag $:/tags/Image and the field domain to the imported svg
4. In the field domain, write “discord.com”

Result:

Download

external-links-with-icons(1).json (25.4 KB) : deprecated

I made a v2 using css masks instead. The CSS generated with the v2 is 46% smaller than the v1 (thus, it’s faster) + it does not flicker when hovering the link (only one svg is loaded rather than 3 for each link state) :

External links icon v2 (using masks).json (1.5 KB) (this file does not contain the additional icons, you can get those here)

The only downside is that this method only work for monochromatic icons (without using complicated css). It’s not really an issue for me thought because I only use monochromatic icons for my links anyway.

Tools to create your own icons

• SVG: inkscape. You can often shrink down the svg by converting everything to path: ctrl+A , Path > Object to path , Path > Combine. You can try to simplify the path a bit with Path > Simplify to get ride of unnecessary nodes. Make sure the viewbox is framing your drawing (Edit > Resize Page to Selection), then save as “optimized svg”.
• Optimize your svg: svg-path-editor, svgomg
• Create/edit Png/Jpg icons : https://www.photopea.com

Futur improvement

SVG font generation in wikitext ? Is that even possible ?

[TW_Tones]

@telumire this looks great and Quite innovative;

I am trying to digest and extend the explanation/documentation

Basically you use an existing image tiddler or create an image tiddler, identified by the tag $:/tags/Image and containing an svg or an external image with the _canonical_uri field. Now add the domain field to any image tiddler containing the key part of one or more domains eg gmail https tiddlywiki file

Then try this in a tiddler;

* `https://gmail.com` https://gmail.com
* `[[http://gmail.com]]` [[http://gmail.com]]
* `[[Gmail|https:/gmail.com]]` [[Gmail|https:/gmail.com]]
* `<a href="http://gmail.com">GMAIL</a>` <a href="http://gmail.com">GMAIL</a>
* `file://C://` file://C://

• What other forms work, or done work?

This solution will prefix url’s with the icon which includes the domain “keyword” in them.

• I am not sure if and how to order or prioritise which image to use eg when the url satisfies two “domain” key words eg https and gmail
• I am also keen to develop a work flow with minimal effort when importing a url to obtain the favicon as one example.
  • Eg Auto create an appropriate image tiddler and use the URL to obtain the favicon.
• I wonder if links with a file extensions could be discovered eg file:///I:/TW5%20Intranet/MyBundles/alt-title-display.json?

[telumire]

@TW_Tones

What other forms work, or done work?

The css I use to match the url is this:

a[href*="domain"]{..}

Where domain is a title in the field “domain” of an image tiddler. The * indicate that this match a keword in a string. See Attribute selectors - CSS: Cascading Style Sheets | MDN

[attr*=value]

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

E.g, if an image tiddler has a domain field with the word “google” inside, the css will match every url with the word “google” inside. To be more specific, you could add the domain “www.google.”, that way you only match google’s url, and not any url with google inside (e.g www.mywebsite.com/google-is-a-search-engine wont be match).

The css rules are generated with this list widget:

<$list filter="[[$:/tags/Image]tagging[]has[domain]]">
...
</$list>

By default, the order will be the order of the list contained inside the tiddler “$:/tags/Image”. The last item on the list will take priority (CSS Cascade).
You can change it by drag and dropping the dropdown list in the “$:/tags/Image” tag.

@TW_Tones

• I am also keen to develop a work flow with minimal effort when importing a url to obtain the favicon as one example.
• Eg Auto create an appropriate image tiddler and use the URL to obtain the favicon.
• I wonder if links with a file extensions could be discovered eg file:///I:/TW5%20Intranet/MyBundles/alt-title-display.json?

Maybe with javascript ? I dont think it’s possible with wikitext/widgets only…

Some hints found on stackoverflow that may or may not be useful:

1. Most browsers support getting the favicon by sending a request (/favicon.ico) themselves, instead of in the html.

2. Another solution is provided by Google.

To get the favicon for a domain, use:
https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com

To get the favicon for an URL, use:
https://s2.googleusercontent.com/s2/favicons?domain_url=https://www.stackoverflow.com

So as I see it, to make it automatic you would need to create an image tiddler each time a new domain url is used - which require to parse the content of each new tiddler, then automatically create a new tiddler with the url https://s2.googleusercontent.com/s2/favicons?domain= + the new domain linked.

EDIT: Maybe you dont need to create a new tiddler for each new domain, everything could be done with filters in one stylesheet tiddler … but the only links operator we have (links and backlinks) only work for wikilinks, it could still be done with regexp but performances most likely wont be great Unless we do it on a tiddler edit/creation, by modifying the edit button … that may work.

[TW_Tones]

@telumire thanks for your detailed response and a nice Code Pattern.

@telumire

Maybe with javascript ? I dont think it’s possible with wikitext/widgets only…

• if there were a supporting utility or JavaScript macro that can be used in more than one way I would consider this,
• however my approach would be to use macros/widgets and wikitext first and simplify as much as possible or provide guidance.
• I already have some great unpublished tools to drop bookmarks on tiddlers, store them in fields and rename them, It also extracts a lot of information from the protocol, url and/or file extension’s, I can see I could extend it to “add the domain” to an existing image tiddler by default but provide a button to “harvest and create an favicon tiddler”.
  • Importantly links also open in a named target extracted from the domain which is great to access tiddlywikis and avoid simultaneous opens.

If anyone feels like collaborating let me know. I have not yet done this with anyone to a great extent.

[Mohammad]

Hi @telumire
I did a little hack to your awesome code for generating external link icon

1. I used a dictionary tiddler to define domain and icons and thus no need to touch the core image tiddlers
2. I renamed the $:/Libro/ExternalLinksIcon/Style to $:/Libro/ExternalLinksIcon/StyleGenerator
   2.1. I changed a little bit the code to read from dictionary tiddler
   2.2. The static stylesheet now is saved in $:/styles/ExternalLinksIcon/Output
3. After setting all customizations, defining domains and images/icons, I save the wiki and reload
4. The generated $:/styles/ExternalLinksIcon/Output just can be exported and dragged and dropped into any TW and you will have the external links with icons.

Thank you again for all your talent and useful tools you have created.

telumire-libro-externallinks-icon-generator.json (4.4 KB)