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

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

First of all, build you SVG icon:

• It must contains only one path
• by contained in a 14x14 viewbox, with one unit empty border (your icon must 12x12 centered)
• Fill color does not matter.

As 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 in src/assets/font-awesome-custom/svg. We will save it as miscs/paragliding.svg.

Build JS version

Just run this :

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']" />

🎉