Use icons in files content

[volkoff-git]

greetings !

it would be nice, if we have a possibility to insert those icons from some popup menu directly in files (not like file icon).
For example to decorate lists , headings etc...

how hard is it ?

Thank you !

[FlorianWoelki]

I don't think that it is too hard, because this plugin has everything in place. There still has to be some work to do.
I am thinking about it. But first, a general renaming has to happen.

[feedhopper]

This would be SOOO GREAT!

I just tried using another plugin for that purpose but what is currently on offer does either not work on mobile (android) or blows the used icons out of proprtion and consequetly messes up the line spacing.
I tried Emojis but am not a huge fan of the look. I prefer something more subtle and in tune with the theme.

Do you have a rough idea on how long this might possibly take?

THANKS SO MUCH for this great plugin!!!!!

[feedhopper]

Actually, putting this functionality into the plugin, it would literally make the plugin a one-stop-icon-solution for obsidian.

[nebspacefarer]

I've read #232 and this new vision is very exciting for Obsidian users and could create an all-in-one updated solution to replace a lot of deprecated/not updated plugins.

How much work has been done regarding adding inline icons inside notes content? I have been looking through the source code to familiarize myself with it and I would like to see what could be done/what has been done in order to get such an important feature added, and possible help with it.

As for now it looks like icons affiliated with folders and notes titles are stored in the data.json, and beforehand saveIconToIconPack is used to find and extract the icon from the given pack (as it runs extractIconToIconPack afterwards if it is found) when selected with the context menu.

What would be the expected way you would like the icons to be recognized inside a note? Here is my take on it (one or more solutions could be implemented):

• Would a shortcode :icon: with auto-completion context menu (later down the line) would work like obsidian-icon-shortcodes provides? That would mean to only parse them when the user is effectively in Read Mode, which would be in my opinion acceptable, and the back-end would be to replace the shortcode handle with the appropriate svg extracted file in html. This can be done in a pretty way by registering a custom post processor with Plugin.registerMarkdownPostProcessor.

• We could also think of a more advanced (and optional, with default values) shortcode syntax to deal with various sizes and fill colors :iconName-2rem-blue: maybe, that would extend on the possibilities the plugin offers. Putting icons in headers would already be affecting height and width parameters to keep consistency.

• A context menu entry from notes could also allow the user to open the icon picker modal similar to the one opened by the file-menu context menu. Would require to change the callbacks to adapt to the new structure, either by creating a whole new IconsPickerModal or by adding a parameter that differentiate whether it's been opened in the file-menu context or in the editor-menu and make changes accordingly, to save some efforts.

Awaiting further answer before starting to experiment with this idea.

[nebspacefarer]

A lot of the things I stated above are wrong now that I took an in-depth look at the code and the Obsidian API.

I've made an early implementation I will share in a PR in the next hours/days, basically it consists on :icon: shortcodes that can be auto-completed dynamically with an EditorSuggest getting populated and narrowed down as we type.
I implemented a MarkdownPostProcessor to parse the shortcodes when entering Read Mode, replacing them by their correct svgElement from the Icon object.
It supports colors out of the box as the svgElement has fill:currentColor already, and its width and height are dynamically changed depending if in a header or not.
So far execution time is flowless even with a lot of icons on one page (not even 1 ms on my part), and it all works on mobile devices as well.

Will give more technical details in my PR, hopefully it will look good enough to be accepted.

[FlorianWoelki]

Sounds good, looking forward to your PR!
It should be similar to icon shortcodes to add a good UX. Obviously, things will change in the future, especially related to the internal API because things are still quite messy :D However, that should not stop you from implementing this.