Rails Asset Pipeline: Building an Icon Font from SVG Files

Updated . Posted . Visible to the public. Deprecated.

Please use this approach instead.

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

See also

Dominik Schöler
Last edit
Michael Leimstädtner
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2019-05-27 08:17)