While we haven’t gotten around to it yet, this system also means that you can build a reference page with all your icons and implement small features such as fuzzy search or quick copy actions to improve your workflow even more. Once the loader was setup(just like any other), all we needed was an Icon component that we could call to create instances of these symbols, an example of which was also included in the svg-sprite-loader repo: Many thanks to over at GitHub.įinally, just simply call the icons from wherever you need it: Since Jotform 4.0 uses React & Webpack ( why aren’t you?), we opted to use the svg-sprite-loader to import all of the SVG files under our assets folder and inline them inside the page as SVG symbols. What’s more, you’re getting a few other benefits such as simple multi-color icons, SVG presentation attributes that can drastically alter the style of the icons, an absurdly simple deployment, more control over your environment and etc. You can style them without affecting each other, and they can be scaled to fit while preserving aspect ratio.īasically, you’re getting everything Icon Fonts can offer without any of its issues. The beauty of SVG symbols is that they create reusable reference points that are independent of each other. In the end, we decided to move forward with inline SVG symbols. Follow Jotform Stories to read it first when it’s published.) Details of this gruesome battle will be published very soon in another article, discussing the issues mentioned here and more. Requires more CSS to position properly.Īlas, that is how another great SVG Icons vs.Slightly inconsistent rendering due to font hinting.Fonts can be overridden by browser settings or apps.Impaired functionality when(not if) icon fonts fail to load.By now, we had already run into a few issues specifically related to Icon Fonts: This is when we started weighing our options. After an hour spent debugging, it was clear that we needed to take a step back, analyze and definitely internalize this lengthy build process. The last straw was a bug that was caused by a new stylesheet that called an older version of the icon stylesheet, which in turn overrode the CSS declaration but not the font file. I’m sure you can imagine how frustrating this can get. We wanted to serve the icon font ourselves, so this meant that we needed to export the icons from Icomoon, import it into our codebase and then keep track of revisions between several GitHub repos every time we added a new icon. While it was fairly usable before production began for the new version of Jotform, it turned into a nightmare for us when Jotform 4.0 went beta live and we introduced versioning to our style guide.
Initially, we used Icomoon as a central database for our icons. Our product has a lot of feature depth, so we’ve found that one-size-fits-all solutions don’t really work out well in the end. You don’t need to have a single standard - you can have two or even more depending on where you apply them.
This is essentially what happens when you down-sample.Ĭonsider all use cases first, then set your standards.