Custom callout with a SVG file not a lucide SVG

[Rivol0gY]

What I’m trying to do

Hi to the Obsidian’s community!

Let’s say I have a SVG icon (my_icon.svg) of my own stored into .obsidian/icons folder at my vault’s root folder.
I want to use this icon and not a lucide one in a custom callout.

Things I have tried

I created a CSS snippet with a custom snippet that is using a Lucide icon (for example: --callout-icon: lucide-lightbulb;)

It works perfectly…

Now I tried to replace the --callout-icon: with different tries and it didn’t work:
--callout-icon: <img src=".obsidian/icons/my_icon.svg" alt="">
--callout-icon: '<img src=".obsidian/icons/my_icon.svg" alt="">';
--callout-icon: '<svg><img src=".obsidian/icons/my_icon.svg" alt=""></svg>';
--callout-icon: 'url(.obsidian/icons/my_icon.svg)';
--callout-icon: '<object type="image/svg+xml" data=".obsidian/icons/my_icon.svg"></object>';
--callout-icon: '<svg><use xlink:href=".obsidian/icons/my_icon.svg"></use></svg>';

What I’m doing wrongly?

Thanks a lot!

[ariehen]

As far as I know, you need to encode the svg within the '<svg>...custom svg...</svg>'; section. You can’t refer to a local file. An example here:

Custom SVG icons not working in callouts

What I’m trying to do Make a callout with a ‘custom’ svg (it’s just a lucide icon that obsidian doesn’t have natively) Things I have tried I used the svg format to add the icon, but it stopped working today when I updated obsidian. Here’s the code: .callout[data-callout="chirp"] { --callout-color: 205, 155, 255; --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" s…

[Rivol0gY]

Thanks for the feedback.

So maybe a dumb question, is it possible to “translate” (easily) the SVG file into its “code” <svg>...</svg>? e.g. a website that convert the SVG file into the code to be pasted?

For example, I found here that, with Adobe Illustrator, it may be possible… Unless you have Adobe Illustrator

Cheers!

[ariehen]

For Lucide icons not yet included in Obsidian, you can copy the URL from the Lucide site:

There are likely more sites you can use, but I’ve used these to covert SVGs to data URLs before:

https://heyallan.github.io/svg-to-data-uri/
https://yoksel.github.io/url-encoder/

Also, the data URLs from the Lucide site should be fine for the <svg>...</svg> version, but sometimes an alternative method is needed. Good luck!

Callout (custom) SVG icons

What I’m trying to do I’m trying to create custom callouts with their own SVG icons (not lucid!). SVG file itself I generate from LaTeX formula, i.e., I type \Omega in one converter which generates SVG file from it and then I past it in the following custom callout: .callout[data-callout="word"] { --callout-color: 100, 100, 100; --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="130.64" height="127.44" viewBox="0 -704 722 704" xmlns:xlink="http://www.w3.org/1999/xlink" aria…

[Rivol0gY]

Thanks a lot for the feedback. I will give a try!

[Rivol0gY]

Hi!

Sorry for the delay, I used the Lucide “File Music” SVG with the following code - I, however, clicked on Copy SVG not Copy Data URL because it doesn’t work:
--callout-icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-music"><circle cx="14" cy="16" r="2"/><circle cx="6" cy="18" r="2"/><path d="M4 12.4V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2h-7.5"/><path d="M8 18v-7.7L16 9v7"/></svg>';

And it renders… weirdly. It looks like the stroke is very thick. I tried into the two websites you provided and it renders as per Lucide website.

Very strange… Did I do something wrong?

Cheers

[Rivol0gY]

I tested with a supported icon: lucide-accessibility
It renders perfectly of course but if I copy the SVG code, I have the same behaviour and the rendering is very thick and inaccurate.