There’s an entire SVG display and management features built-in to this system. It consists of both custom SVG Shortcode I wrote and in-line parsing and display of SVGs via the svg-sprite NPM package.
🔥 Massive Thank You to Ryan Scherler and his Eventy Starter where I first learned about the svg-sprite package.
NOTE: The post, Managing Social Share, Author, and Footer Icons goes into a bit of detail on how to manage those elements.
SVG Sprites live in the /src/assets/svg/ directory and are currently used in this system on:
/src/_data/colors.js/src/_data/social.json/src/_data/structure.js by setting g_showFooterSocialIcons: false./src/_data/colors.jslogo.svg and logo_mobile.svg and replace the current files in /src/assets/svg/ directory/src/_data/colors.js/src/_includes/components/socialshare.njk/src/_data/structure.js by setting g_showSocialShareIcons: false or disable individual plaforms by setting their values to false./src/_data/colors.js/src/_data/authors.json for each AuthorIf you want to add your own SVGs for use with the SVG Sprite system and SVG Shortcode, you’ll have to first add them to the /src/assets/svg/ directory and make sure they are named using the same syntax as the SVGs already present.
You should also open those SVGs in your text/coding editor and see how they have been modified for accessibility and to return the best Lighthouse optimization scores.
If you’re happily typing along on that next great blog post and you realize what it really needs is a SVG, you’re in luck!
Just use the custom SVG Shortcode I created to insert a SVG anywhere and control it's size, color, padding, position, float, etc. For example, the following code returns the GitHub SVG floating to the left:{% svg "github", "mt-1 mr-2 h-10 w-10 text-blue-500 float-left" %}