Rails Asset Pipeline: Building an Icon Font from SVG Files

Webpacker can automatically create an icon font from SVG files, which is really handy. When you're using the asset pipeline, you can still have an icon font from SVG files, but it requires some manual work.

Creating the icon font

• Install the NPM package icon-font-generator. If you're not using nvm, run sudo npm install -g icon-font-generator
• Put all SVG icons for the font into their own directory.
  • The icon name will be taken from the SVG file name
• Download the attached script and update the Configure section
• Run it
• Turn the CSS and JSON output into usable styles for your application

Tools

• Inspecting SVG files: http://fontello.com Show archive.org snapshot
• Inspecting TTF or WOFF fonts: https://fontdrop.info Show archive.org snapshot
• Resizing SVG files: https://www.iloveimg.com/resize-image/resize-svg Show archive.org snapshot

See also

• How to: Ensure proper iconfont rendering with Webpack