Several icons cannot be converted to web-fonts using tools such as Fontastic or Fontello

[simon-budin-tcy]

Background explanation

Using the icons as suggested in the readme (i.e. injecting svg directly into the web page) is not very scalable. In modern apps, the icons are preferably embedded into custom web-fonts, providing a nice level of abstraction between the icon name and the actual svg code. Copy and pasting the same svg everywhere can very rapidly become a nightmare in big apps for several reasons :

• if you copied the same svg at several locations and want to replace it, you have to change it everywhere
• each copied svg would have to be styled as its own separate markup entity which is not desirable

Instead, I would generate a custom webfont from the icons I like, using tools such as Fontastic or Fontello. This webfont would be loaded once and cached correctly into clients browsers. Then I can abstract the font glyph even further by creating a custom vuejs or react (or whatever modern js framework) component icon so I can write this in my code <icon name="user" /> or <icon name="arrow-up" />. The font is loaded once, and I can style the whole font on its own as I would with any kind of actual text, which is awesome.

The actual issue with majesticons

The reason I am saying all this is because with several icons in Majesticons (I tested 6 or 7 of them), the tools that perform the conversion from svg to web-fonts (Fontastic and Fontello are those I tested) complain that the svg markup cannot be converted properly. Fontello gives a warning while importing e.g. the plus icon like this :

The fontello github repo actually gives very thorough explanations about the limitations of web-fonts from SVG.

Fontastic (which is a bit clunky to be honest) messes up the icons like so (I imported both the svg copied from majesticon directly, then copied the svg generated by Figma from the project):

By the way the empty icon on the left is the plus icon I mentioned earlier. While generating this set, Fontastic simply crashes. This kind of issue never occured while using svg markups from fontawesome.

I am not an svg specialist and don't have any clue about the level of compromise needed to pass those limitations, but I think this would be very desirable that the icons in Majsticons could be converted directly to webfont glyphs.

Sorry for the wall of text by the way 😅

[halfmage]

@simon-budin Thank you very much for pointing that out! I will take the time to investigate this topic and perform some checks with those tools as well.

Will post an update when I fixed this 👋

[halfmage]

Hey, @simon-budin thanks for being patient. I checked the line icons and fixed a lot of them so they are now usable for icon font generation! I tried it with fontello and icoMoon. Next I will update the fill icon version.

If you find anything else let me know!