Nearly every project I've worked on has, at some point, had to answer the question of inlining SVGs into HTML. I've been refining my approach to this from project to project and now have something stable and reusable I just drop into anything new. Embedding SVG markup directly in your HTML gives CSS full access to the SVG's internals — fill: currentColor, stroke control, hover states, all of it. It also means your icons come along for free with the HTML you're already serving, rather than as a separate request per image. If you need a deeper primer on the approach, CSS Tricks has a good one. The first time this came up, I immediately reached for a gem. Everyone does, especially early in your career. The excellent inline_svg was the obvious choice. It worked out of the box, slotted cleanly into ERB templates via a view helper, and had first-class support for a range of asset pipeline configurations — including Webpacker (Webpacker, not Shakapacker — yes, that long ago), which was always awkward to work with. External dependencies come at a cost though. A general-purpose tool is, by definition, more complicated than you need it to be. inline_svg handled multiple asset pipeline strategies, SVG transformation pipelines, and a configuration surface to match. That flexibility meant it could be applied to pretty much any project. But icons, in practice, are done exactly one way per project — you pick a folder, you pick a naming convention, and that's it for the lifetime of the app. The complexity it brought for cases I'd never hit started to feel like dead weight: transitive dependencies and a configuration file the next person had to understand before changing anything. A few years later I found myself needing to add inline SVGs again. This time around I vendored a small module into app/lib that read SVG files from a known path, did the minimal manipulation needed, and returned markup: # app/lib/icon_renderer.rb class IconRenderer class IconNotFoundError Took a few years and a few attempts to get there, but I now have a single file to drop into any new project. The specific choices are mine: Tailwind for CSS, ViewComponent for encapsulation, Oga for parsing. But the shape of it works regardless of your stack, and the gist is there if you want a starting point. Originally posted on tonyrowan.tech