How I use SVG icons with Ruby on Rails

As a designer who stumbled into Ruby on Rails, I always look for more opportunities to simplify, bringing better design to the framework. I’m working on a new project called Rails UI that focuses on this to a vast degree, but a small component of that project involves SVG icons.

Icons make it easier to understand UI and ux patterns. Often paired with text, SVG icons give more context to a user's action, thus making conviction strong from their point of view to know what to do with the software presented to them.

Why I prefer SVG icons

I prefer SVG icons to images or font icons for scalability and accessibility. SVGs are simply code at the end of the day. They are scalable, and you can easily manipulate colors, animation, and size with CSS. They have embedded title elements that you can prefill with a title to help it be more accessible.

In nearly every project, I reach for icons, so over time, I’ve naturally built out an approach to using them with Ruby on Rails and a gem called inline_svg.

Continue reading: https://web-crunch.com/posts/svg-icons-with-ruby-on-rails

#ruby #rails #svg #webdevelopment

======

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

🎨 Check out my new project: Rails UI https://railsui.com

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/svg-icons-with-ruby-on-rails

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=tj34Vad7laM