Both methods are easy to set up and there isn't a clear winner. Easiest to set upīoth methods are actually easy to set up within about 5-10 minutes. The output that was produced seems decent on first viewing so that's good. This method only uses one gulp plugin but the fact that this gulp plugin uses svg-sprite which has a ton of options, it does seem a little less straightforward to set up. Which means that I can use the icons like Chris Coyier descrives in this post. I'll be using gulp for this as well, just like I did for the iconfont. To make using the icons easy I will create a spritesheet that contains all my svg icons. With a couple of lines in my gulpfile and two plugins I managed to convert my svg icons into a font. I also used the gulp-iconfont-css plugin so I didn't have to create my own css template. The gulp-iconfont plugin seems like a good plugin to generate a font with.
Like I mentioned, I will be using Gulp to generate my assets. The icons I'm going to use were created by Jamison Wieser for The Noun Project. Also, Gulp seems like the right tool for this type of job I don't want to create my assets by hand. I made this decision because I use Gulp on all my projects. I will be using Gulp to automate the asset creation process. The first method I will set up is the iconfont. The method you end up choosing should not only work well but it should also be easy to manage. The first thing I'm going to compare is the set up process for each method. Svg icons are a easier to position and manipulate. I'd say iconfonts win because they're a bit easier to use. TL DR: The comparison is very close, both have their big upsides and no real big downsides. At the end of this post you will hopefully have an understanding of both svg icons and iconfonts and you'll be able to choose one of these icon delivery methods for your own projects. This post is intended to give an overview of these two methods and to explore the benefits and drawbacks of each method. This matters because our websites get viewed on many devices and you want your icons to be crisp on every device, not just the ones you optimized for by hand. These methods share the big benefit of scalability. When browsers started properly supporting and svg some people chose to use icon fonts to serve their icons, others chose svg sprites to do this. Png is a rasterized format which means that if you try to make the image (or icon) larger, the quality will become worse. We can all agree that using png sprites for icons is not the most modern (or best) way to present icons on the web.
0 kommentar(er)
