Custom callout with a SVG file not a lucide SVG

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!

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:

1 Like

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

Cheers!

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!

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

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

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.