Skip to content

Instantly share code, notes, and snippets.

@hudri
Last active March 23, 2018 16:28
Show Gist options
  • Save hudri/49498b68606bb6c1626e67f720867db5 to your computer and use it in GitHub Desktop.
Save hudri/49498b68606bb6c1626e67f720867db5 to your computer and use it in GitHub Desktop.
Turn FontAwesome5 raw <svg>s into <symbol>s
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
@hudri
Copy link
Author

hudri commented Mar 23, 2018

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment