Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EmbedSVG icons instead of icon fonts #1776

Open
rafalp opened this issue Jul 28, 2024 · 0 comments
Open

EmbedSVG icons instead of icon fonts #1776

rafalp opened this issue Jul 28, 2024 · 0 comments
Labels
area: backend This issue involves Python, Django or dependency (eg. database) area: frontend This issue involves JavaScript, React.js and Node new feature New feature

Comments

@rafalp
Copy link
Owner

rafalp commented Jul 28, 2024

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 rafalp added area: frontend This issue involves JavaScript, React.js and Node area: backend This issue involves Python, Django or dependency (eg. database) new feature New feature labels Jul 28, 2024
@rafalp rafalp added this to the Next feature release milestone Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: backend This issue involves Python, Django or dependency (eg. database) area: frontend This issue involves JavaScript, React.js and Node new feature New feature
Projects
None yet
Development

No branches or pull requests

1 participant