SVG - Shortcode

This template uses the eleventy-plugin-svg-sprite package which compiles an SVG Sprite and installs a shortcode to display SVG in any file (Markdown, Nunjucks etc).

🔥 Massive Thank You to Ryan Scherler and his Eventy Starter where I first learned about the svg-sprite package. Thanks also to Patrick Chong for creating eleventy-plugin-svg-sprite.

SVG Sprites : Managing Display, Colors, & Links

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:

• The icons in the Footer
  • Manage their colors in /src/_data/colors.js
  • Manage which icons display and their links in /src/_data/social.json
  • Disable them competely in /src/_data/structure.js by setting g_showFooterSocialIcons: false.
• The logo (both desktop and mobile) in the Nav Bar
  • Manage their colors in /src/_data/colors.js
  • Create your own and name them logo.svg and logo_mobile.svg and replace the current files in /src/assets/svg/ directory
• The Social Share icons on Post Details
  • Manage their colors in /src/_data/colors.js
  • Manage their functionality in /src/_includes/components/socialshare.njk
  • Disable them completely in /src/_data/structure.js by setting g_showSocialShareIcons: false or disable individual plaforms by setting their values to false.
• The Author’s social websites on the Author Details
  • Manage their colors in /src/_data/colors.js
  • Manage which icons display and their links in /src/_data/authors.json for each Author

Adding Your Own SVGs to the System

If 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.

Using SVG Sprites in .md Content

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 SVG Shortcode installed by eleventy-plugin-svg-sprite to insert a SVG anywhere and control its 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" %}