Move SVGs to inline

Author: stedman

.eleventy.js

@@ -4,6 +4,7 @@ const htmlmin = require('html-minifier');
 const sassWatch = require('./_includes/sass-watch');
 const filter = require('./_includes/filter');
 const scAvatar = require('./_includes/shortcodes/avatar');
+const scSocialSvg = require('./_includes/shortcodes/social-svg');
 const scMeetupDetails = require('./_includes/shortcodes/meetup-details');
 const scVideoPlayer = require('./_includes/shortcodes/video-player');
 
@@ -69,6 +70,9 @@ module.exports = (eleventyConfig) => {
   // SHORTCODE: Resize and cache images.
   eleventyConfig.addLiquidShortcode('avatar', scAvatar);
 
+  // SHORTCODE: Add social icon SVG block.
+  eleventyConfig.addLiquidShortcode('socialSvg', scSocialSvg);
+
   // PLUGIN: RSS feed
   eleventyConfig.addPlugin(pluginRss);
 

_includes/shortcodes/meetup-details.js

@@ -33,7 +33,13 @@ const fullDate = (dateValue) => {
 module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetTitle, meetUrl) {
   const header = msgHeader || 'Meetup details';
 
-  const meetHeader = meetTitle && meetUrl
+  const svgBlock = `<svg display="none">
+    <g id="alarm"><path d='M153.59,110.46A21.41,21.41,0,0,0,152.48,79h0A62.67,62.67,0,0,0,112,64l-3.27.09-.48,0C74.4,66.15,48,95.55,48.07,131c0,19,8,29.06,14.32,37.11a20.61,20.61,0,0,0,14.7,7.8c.26,0,.7.05,2,.05a19.06,19.06,0,0,0,13.75-5.89Z'/><path d='M403.79,64.11l-3.27-.1H400a62.67,62.67,0,0,0-40.52,15,21.41,21.41,0,0,0-1.11,31.44l60.77,59.65A19.06,19.06,0,0,0,432.93,176c1.28,0,1.72,0,2-.05a20.61,20.61,0,0,0,14.69-7.8c6.36-8.05,14.28-18.08,14.32-37.11C464,95.55,437.6,66.15,403.79,64.11Z'/><path d='M256.07,96c-97,0-176,78.95-176,176a175.23,175.23,0,0,0,40.81,112.56L84.76,420.69a16,16,0,1,0,22.63,22.62l36.12-36.12a175.63,175.63,0,0,0,225.12,0l36.13,36.12a16,16,0,1,0,22.63-22.62l-36.13-36.13A175.17,175.17,0,0,0,432.07,272C432.07,175,353.12,96,256.07,96Zm16,176a16,16,0,0,1-16,16h-80a16,16,0,0,1,0-32h64V160a16,16,0,0,1,32,0Z'/></g>
+    <g id="calendar"><path d='M416,64H400V48.45c0-8.61-6.62-16-15.23-16.43A16,16,0,0,0,368,48V64H144V48.45c0-8.61-6.62-16-15.23-16.43A16,16,0,0,0,112,48V64H96a64,64,0,0,0-64,64V416a64,64,0,0,0,64,64H416a64,64,0,0,0,64-64V128A64,64,0,0,0,416,64ZM136,416a24,24,0,1,1,24-24A24,24,0,0,1,136,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,136,336Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,216,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,216,336Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,296,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,296,336Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,296,256Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,376,336Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,376,256Zm72-120v16a8,8,0,0,1-8,8H72a8,8,0,0,1-8-8V128A32.09,32.09,0,0,1,96,96H416a32.09,32.09,0,0,1,32,32Z'/></g>
+    <g id="location-sharp"><path d='M256,32C167.67,32,96,96.51,96,176c0,128,160,304,160,304S416,304,416,176C416,96.51,344.33,32,256,32Zm0,224a64,64,0,1,1,64-64A64.07,64.07,0,0,1,256,256Z'/></g>
+  </svg>`;
+
+  const meetHeaderBlock = meetTitle && meetUrl
     ? `<div class="title is-size-4">
         <a href="${meetUrl}">${meetTitle}</a>
       </div>`
@@ -62,25 +68,26 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
   }
 
   return `<div class="message flex-item flex-item-0">
+  ${svgBlock}
   <div class="message-header">
     ${header}
   </div>
 
   <div class="message-body">
-    ${meetHeader}
+    ${meetHeaderBlock}
 
     <div>
       DATE
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/calendar.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#calendar"></use></svg>
       </span>
       <time class="has-text-primary has-text-weight-bold" dateTime="${meetDate.toISOString().substring(0, 10)}">${fullDate(meetDate)}</time>
     </div>
 
     <div>
       TIME
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/alarm.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#alarm"></use></svg>
       </span>
       <time class="has-text-primary has-text-weight-bold" dateTime="15:30">7:30PM</time> -
       <time class="has-text-primary has-text-weight-bold" dateTime="21:00">9:00PM</time>
@@ -89,7 +96,7 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
     <div>
       LOCATION
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/location-sharp.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#location-sharp"></use></svg>
       </span>
       <strong class="has-text-primary">${venueOrg.name}</strong>
       ${venueLocation}

_includes/shortcodes/social-svg.js

@@ -1,29 +1,31 @@
+{%- socialSvg -%}
+
 {%- if person.email %}
-<a class="icon tooltip" href="mailto:{{ person.email }}" title="Email: {{ person.email }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/at-circle.svg' | url }}"><i class="is-sr-only">email</i></ion-icon>
+<a class="icon tooltip" href="mailto:{{ person.email }}" aria-label="Email: {{ person.email }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#at-circle"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.homepage %}
-<a class="icon tooltip" href="{{ person.homepage }}" title="Home: {{ person.homepage }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/home.svg' | url }}"><i class="is-sr-only">homepage</i></ion-icon>
+<a class="icon tooltip" href="{{ person.homepage }}" aria-label="Home: {{ person.homepage }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#home"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.twitter %}
-<a class="icon tooltip" href="https://twitter.com/{{ person.twitter }}" title="Twitter: {{ person.twitter }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-twitter.svg' | url }}"><i class="is-sr-only">Twitter</i></ion-icon>
+<a class="icon tooltip" href="https://twitter.com/{{ person.twitter }}" aria-label="Twitter: {{ person.twitter }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-twitter"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.github %}
-<a class="icon tooltip" href="https://github.com/{{ person.github }}" title="GitHub: {{ person.github }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-github.svg' | url }}"><i class="is-sr-only">GitHub</i></ion-icon>
+<a class="icon tooltip" href="https://github.com/{{ person.github }}" aria-label="GitHub: {{ person.github }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-github"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.linkedin %}
-<a class="icon tooltip" href="https://www.linkedin.com/in/{{ person.linkedin }}" title="LinkedIn: {{ person.linkedin }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-linkedin.svg' | url }}"><i class="is-sr-only">LinkedIn</i></ion-icon>
+<a class="icon tooltip" href="https://www.linkedin.com/in/{{ person.linkedin }}" aria-label="LinkedIn: {{ person.linkedin }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-linkedin"></use></svg>
 </a>
 {% endif -%}

_includes/social-links.liquid

@@ -24,10 +24,13 @@
   <title>{{ pageTitle }}</title>
   <link rel=alternate type=application/atom+xml href="{{ site.url }}{{ '/feed.xml' | url }}" title="{{ site.title }} Atom feed" />
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | url }}">
-  <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
 </head>
 <body>
+  <svg display="none">
+    <g id="logo-github"><path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/></g>
+    <g id="logo-slack"><path d='M126.12,315.1A47.06,47.06,0,1,1,79.06,268h47.06Z'/><path d='M149.84,315.1a47.06,47.06,0,0,1,94.12,0V432.94a47.06,47.06,0,1,1-94.12,0Z'/><path d='M196.9,126.12A47.06,47.06,0,1,1,244,79.06v47.06Z'/><path d='M196.9,149.84a47.06,47.06,0,0,1,0,94.12H79.06a47.06,47.06,0,0,1,0-94.12Z'/><path d='M385.88,196.9A47.06,47.06,0,1,1,432.94,244H385.88Z'/><path d='M362.16,196.9a47.06,47.06,0,0,1-94.12,0V79.06a47.06,47.06,0,1,1,94.12,0Z'/><path d='M315.1,385.88A47.06,47.06,0,1,1,268,432.94V385.88Z'/><path d='M315.1,362.16a47.06,47.06,0,0,1,0-94.12H432.94a47.06,47.06,0,1,1,0,94.12Z'/></g>
+    <g id="logo-twitter"><path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/></g>
+  </svg>
   <header class="page-header hero is-primary">
     <div class="hero-body is-paddingless">
       <div class="container">
@@ -99,20 +102,20 @@
           </div>
           <div class="navbar-end">
             <a class="navbar-item is-inline-block-tablet" href="https://twitter.com/{{ site.author.twitter }}">
-              <span class="icon tooltip" title="&ldquo;@{{ site.author.twitter }}&rdquo; on Twitter">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-twitter.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;@{{ site.author.twitter }}&rdquo; on Twitter">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-twitter"></use></svg>
               </span>
               <span class="is-sr-only-desktop">Twitter: @{{ site.author.twitter }}</span>
             </a>
             <a class="navbar-item is-inline-block-tablet" href="https://{{ site.author.slack }}.slack.com">
-              <span class="icon tooltip" title="&ldquo;{{ site.author.slack }}&rdquo; on Slack">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-slack.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;{{ site.author.slack }}&rdquo; on Slack">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-slack"></use></svg>
               </span>
               <span class="is-hidden-desktop">Slack: {{ site.author.slack }}</span>
             </a>
             <a class="navbar-item is-inline-block-tablet" href="https://github.com/{{ site.author.github }}">
-              <span class="icon tooltip" title="&ldquo;{{ site.author.github }}&rdquo; on GitHub">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-github.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;{{ site.author.github }}&rdquo; on GitHub">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-github"></use></svg>
               </span>
               <span class="is-hidden-desktop">GitHub: {{ site.author.github }}</span>
             </a>