Turn FontAwesome5 raw <svg>s into <symbol>s

fa5_symbol.sh

cd advanced-options/raw-svg/regular
# prefix filenames with 'far-' so we could mix icons from different style set
rename 's/^/far-/' *.svg
# change opening tag '<svg xmlsn="http://www.w3.org/2000/svg"' into '  <symbol id="current-filename.svg"'
perl -i -pe 's/<svg xmlns="http:\/\/www.w3.org\/2000\/svg"/  <symbol id="$ARGV"/g' *.svg
# remove the trailng '.svg' from the id
perl -i -pe 's/\.svg"/"/g' *.svg
# change closing tag from '</svg>' to '</symbol>'
perl -i -pe 's/<\/svg>/<\/symbol>/g' *.svg
# go into next style directory, repeat with different filename prefix
# copy&paste content of selected SVGs into HTML document

Turn Font Awesome 5 raw SVGs into symbols so we can include them into HTML documents. Inlined SVGs can be styled with CSS (including hover effects).

<svg class="my_icon"><use xlink:href="#far-angle-left"></use></svg>
<svg class="my_icon"><use xlink:href="#far-angle-right"></use></svg>
<style>
  .my_icon {
    fill: currentColor; // currentColor == inherit CSS color property
  }
  .is-active .my_icon {
    fill: green;
  }
  .my_icon:hover {
    fill: red;
  }
</style>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- hidden SVG library, copy & paste symbols here -->
</defs>
</svg>