Macros to insert icons, buttons and more

Customization Look what I built
1

Intro

Logseq internally uses Tabler Icons. You can browse its website to find an icon and copy its code:

image
image1035×494 77.7 KB

Icon macro

Here there is a macro to be added in your config.edn to easily add those icons in your notes:

"i" "[:span {:class ti} \"&#x$1 \" ]"

Then in your notes you can use the syntax {{i code}}. Result:

image

Button macro

Here there is another macro, this one adds a label to the icon and a URL:

"b" "[:a {:href \"$2\"} [:span {:class ti} \"&#x$1 \" ] \"$3\"]"

Usage: {{b code, URL, Label}}, for example {{b eaad, http://example.com, Label}}. Result:

image
image704×136 11 KB

To point to a page instead the URL must be like this: {{b eaad, #/page/Page name, Label}}

Special button example: GitHub issue

You can also define specific buttons, for example here there is a macro to create a link to a GitHub issue:

"bug" "[:a {:href \"https://github.com/$1/issues/$2\"} [:span {:class ti} \"&#xea48 \" ] \"$2\"]"

Usage: {{bug org/repo number}}, for example {{bug logseq/logseq, 8623}}

Result:
image

2

nice workflow :muscle:
maybe it’s time for me to start using macroses finally ))

1 Like
3

Wow, this is amazing! Thanks for sharing

1 Like
4

FYI this plugin shows a little icon picker when you hit the selected shortcut. Highly more useful than searching for the code and copying it into a macro!

3 Likes
5

This method works pretty well for adding icons in the text. However, it doesn’t work well if you use the this macro for the icon of the properties of a page. Instead of the icon, the coder appears in the head of the page and the icon in the left panel. Is there any solution for that?

6

Before the code, add &#x

7

This is brilliant, I’ll be using this. Thanks!

As an alternative, the icon name can be used:

:ti "[:i {:class \"ti ti-$1\"}]"

Written as:

{{ti folder}}

It seems not all Tabler Icons are available, but you can search which ones are loaded with Ctrl-Shift-I, Sources tab, css. tabler-icons.min.css:

image
image824×492 74.7 KB

1 Like
8

…which I realize now could just be typed as hiccup:

[:i.ti.ti-folder]

No need for a macro at all then.

1 Like