![]() We bump the version number in package.json, and then run a sequence of commands like this: cd ~/Sites/mono-icon-font Publishing to npmĬurrently, our proces for publishing to npm is rather manual. One gotcha is that you have to set a specific height flag and value on the generator command, or else the icon font doesn’t render well: icon-font-generator svg/*.svg -o iconfont -height 1000įor details, you can refer to this Github issue. In our projects, we will typically ship a custom icon font that only uses the icons used in that project, making for the smallest file size possible. Most modern browsers support the woff2 format and this will be the only file to be loaded. The woff2 file for Mono icons weighs in at just 9.26kb. We love icon fonts because you can deliver a lot of graphics variety with a single HTTP request. It transforms a folder of SVGs into an icon font, in all the formats you could want (SVG, eot, woff, woff2, ttf, otf etc.). This is a package we have been using in Bedrock for quite some time. To generate the icon font, we rely on the icon-font-generator npm package. This method is utilized in this Svelte REPL where all Mono icons are referenced, and where you can also see some example code to add icons in a way that a screen reader will still read out something sensible. Since every NPM package is also automatically hosted by the Unpkg CDN, this provides developers with a very simple way to reference Mono icons in small code examples like Codepens or Svelte REPLs: you can simply reference the stylesheet, like so: The icon font repo is also an npm package ( npm link). There is a website repo, which is a private repo at the moment, and an icon font repo which is public ( Github link). The project consists out of two code repositories. ![]() We used Vercel to deploy test versions while developing but eventually moved it over to our trusty own web host. On the website you can copy the individual SVG code for every icon. ![]() The site provides a search functionality, where we used fuse.js to provide a simple fuzzy search mechanism. The Mono Icons website is powered by Vue.js. This post dives into some technical details about the project: how we built the website, how we generated the icon font and an interesting technical gotcha we ran into. Our colleague Marina posted an article about the design of the icon set here. This is a free icon set that consists out of 136 icons, that anyone can use in their projects. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |