Misago icon indicating copy to clipboard operation
Misago copied to clipboard

Embed`SVG` icons instead of icon fonts

Open rafalp opened this issue 1 year ago • 1 comments

Looks like I was mistaken about insisting to keep using icon font in Misago, with "better" practice being embedding SVG directly in the document.

Pros:

  • You only send client the icons that are used on the page.
  • Gzip is very good at compressing repeated uses of same icons in the document.
  • You can include thousands of icons in Misago for plugins and devs to use without increasing download sizes.

The plan

Create a new misago.icons app that will implement IconLoader class that will load icons by name into memory and will return their SVG markup. Icons will be located in misago/icons/tabler directory, but plugins should be able to tell the loader "hey, also look for icons in my own materialdesign directory"

Also implement {% icon "tabler/name" %} template tag that will call this icon loader and return desired icon's SVG or raise an error. {% icon "tabler/name" optional %} shouldn't raise an error if icon could not be found.

rafalp avatar Jul 28 '24 12:07 rafalp

Punting this for 0.40. This is amazing feature and I totally want it, but lets keep 0.40 focused on new permissions system, search and nuking react.js from threads/search/users

rafalp avatar Dec 27 '24 12:12 rafalp