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 usingnvm
, runsudo 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
Posted by Dominik Schöler to makandra dev (2019-05-27 08:17)