The term “build tool” might be scary. It brings to mind fancy command line tools requiring configuration and weird system dependencies that break when you look at them wrong. Sometimes build tools are like that, and we’ll go there in this series. But really a build tool is just something to help make your process easier. Automate something that you were previously doing by hand.
IcoMoon, in that sense, is a build tool. It was (is) a popular tool for building custom icon fonts. It’s wonderful for that. I support any tool that encourages front end devs to create customized, streamlined assets for just what they need rather than including the kitchen sink (every icon on earth) and just using bits of it. IcoMoon isn’t just for @font-face icon fonts though, it can output SVG defs blocks, which it calls an SVG sprite (also a perfectly acceptable term).
Basically you click around on the icons you want and then export it and you get a perfect SVG defs block to use. Note that they aren’t using <symbol> yet, and I’m not sure why, but that means you’ll need to include viewBox and accessibility stuff on your own as you implement them. Sign up for an account there, and you can save the project, meaning you can come back and remove/add stuff as needed rather than starting from scratch. That really makes it a build tool.
Important to know about IcoMoon: you can add your own SVG. You aren’t limited to what you see in the default app. You can get SVG from elsewhere and just add it there and it’ll save with your project. You could use IcoMoon as a build tool with only your own custom SVG and it would still be useful.
icomoon uses symbol now – they must have been listening :)