halfmage / majesticons Goto Github PK
View Code? Open in Web Editor NEW๐ Free Version โ A versatile, beautiful, and scalable iconset. 760 icons each in line and solid style.
Home Page: https://majesticons.com
License: MIT License
๐ Free Version โ A versatile, beautiful, and scalable iconset. 760 icons each in line and solid style.
Home Page: https://majesticons.com
License: MIT License
I'm trying to use the npm package of these icons, but it looks like there are differences between this repository and the package.
For example, I see here a "map" icon that doesn't exist in the npm package, where there are multiple map-*.svg
icons.
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 :
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 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 ๐
I was unaware you also did this icon set.
I tried to integrate majecticons into https://iconexplorer.app and ran into a problem. I use an SVG flattening technique but ran into a few issues with a small number of icons that use transform
on some circles. Most notably this one: https://github.com/halfmage/majesticons/blob/main/line/stop-circle-line.svg?short_path=920ef85
I am wondering if you would be amenable to changing some of these?
๐ A place to mention icons that you miss and would like to be added!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.