How to build icon compatible with fa icon component

If font-awesome does not provide your desired icon, you can build it! Let's add a paragliding icon.

Build a SVG icon

If you're looking for a good tool for creating/editing SVG, Inkscape is a free and open source SVG editor.

First of all, build you SVG icon:

• It must contains only one path
• be contained in a 14x14 viewbox, and must fill as possible the available space. As it'll be displayed in a 14x14 pixels area, you can work on having a pixel-perfect icon.
• Fill color does not matter.

SVG editors saves files with a lot of useless precision, use a SVG size reduction tool, for instance: https://jakearchibald.github.io/svgomg/

Then, save your icon in the good folder inside src/assets/font-awesome-custom/svg. For our paragliding icon, we'll save it as miscs/paragliding.svg.

Build JS version

Just run this command:

npm run generate-icons

Include it in your bundle

In src/js/vue-plugins/font-awesome-config.js, add your new icon :

import paragliding from '@/assets/font-awesome-custom/js/miscs/paragliding';

# and add paragliding in the icon list

Use it

  <fa-icon :icon="['miscs', 'paragliding']" />

🎉 See this commit as an example 🎉