[FR] Add support for rendering icons

[manu-romero-411]

It could be interesting if the plugin allowed to render icons in note headings. Plugins such as Icon Shortcodes and Obsidian Icons can render icons everywhere in notes, including callouts and headings. Adding icons in headings using the mentioned plugins result in some odd strings where the icon should be. Maybe this could be added along with the existent markdown support, or does it depend more on the development of the other plugins?

[skaviouz]

Uhm, do you mean like this:

Where it shows just :rat: and not the actual emoji? Because in my example I used the literal: 🐀 emoji and then manually typed in :rat:. From my experience, some plugins render short codes while others only insert them.

Here are some example Options:

• Emoji Toolbar has insertion and a nice optional GUI. Better than the Window's Emoji Picker UI imho. I use Ctrl + . and Ctrl + ; for the shortcut to match similar to the Windows shortcuts.
• Native Windows 10 or Windows 11 function, you can use the Emoji Picker (Windows_key + . period or Windows_key + ; semicolon). I'll say, I had a wild adventure updating my Segoe UI's font from 1.29 to 1.35 for Windows 10 (not officially supported/Proprietary version only available for windows 11).
• Make.md it has only the basic insertion
• Icon Shortcodes can do insertion and modify the render of shortcodes to display as the emoji (not TOC or other plugins rendering).
  • Quiet Outline, well it can obviously display emojis, but it doesn't make use of the functionality of Icon Shortcodes ability to modify render of shortcodes.

[d9k]

You can call another plugin api like this (works in DevTools of Obsidian app, Ctrl+Shift+I):

var i = app.plugins.plugins['obsidian-icon-shortcodes'];
i.api.getIcon(':wave')

var exampleString = ':wave:, world!'
i.api.postProcessor(exampleString, (iconText) => i.api.getIcon(iconText).outerHTML)

Result:

[d9k]

Added pull request https://github.com/guopenghui/obsidian-quiet-outline/pull/137 with support for Icon Shortcodes plugin.

@manu-romero-411, you can replace main.css, style.css in plugin folder with files from my version https://github.com/d9k/obsidian-quiet-outline/tree/d9k and restart Obsidian

Result: