Temporary fix for SVGs

Groking the code I noticed that Hugo theme is just injecting the svg code in HTML.
I copied their pattern for now since it works. Also appears this is how pol.is is handling their SVGs.

I will read up some more on this benefit over the others. For now, it works.

Author: misscs

data/HomeOverview.yml

@@ -1,13 +1,13 @@
 Overview:
   -
-    Icon: "/icons/icon-crowdsourcing.svg"
+    Icon: "icons/icon-crowdsourcing.svg"
     Text: "Crowdsourcing to inform NYC governance"
   -
-    Icon: /icons/icon-participating.svg
+    Icon: icons/icon-participating.svg
     Text: "Reducing the burden of participation and increasing effectiveness"
   -
-    Icon: /icons/icon-connecting.svg
+    Icon: icons/icon-connecting.svg
     Text: "Connecting organizations and districts around shared concerns."
   -
-    Icon: /icons/icon-open-data.svg
+    Icon: icons/icon-open-data.svg
     Text: "Open knowledge, data, and tools."

layouts/index.html

@@ -57,8 +57,8 @@ <h1 class="f1-l lh-title">Understanding the people in order to make more effecti
 
     <div class="flex flex-row flex-wrap">
       <section class="bt w-50-ns false b--black-10 flex flex-column items-stretch justify-stretch">
-        <div class="bg-gold flex items-center justify-center pa5-l pa4 false">
-          <img src="/icons/icon-participating.svg">
+        <div class="make-icon bg-gold flex items-center justify-center pa5-l pa4 false">
+          {{ partial "icons/icon-survey.svg" }}
         </div>
         <div class="bg-white flex flex-column content-start justify-center-ns justify-start order-1-l pa4">
           <h3>Get started on making your own survey</h3>
@@ -67,8 +67,8 @@ <h3>Get started on making your own survey</h3>
       </section>
 
       <section class="bt w-50-ns false b--black-10 flex flex-column items-stretch justify-stretch">
-        <div class="bg-hot-pink flex items-center justify-center pa5-l pa4 false">
-          <img src="/icons/icon-participating.svg">
+        <div class="make-icon bg-hot-pink flex items-center justify-center pa5-l pa4 false">
+          {{ partial "icons/icon-messaging.svg" }}
         </div>
         <div class="bg-white flex flex-column content-start justify-center-ns justify-start order-1-l pa4">
           <h3>Effective messaging to structure your survey</h3>
@@ -77,8 +77,8 @@ <h3>Effective messaging to structure your survey</h3>
       </section>
 
       <section class="bt w-50-ns false b--black-10 flex flex-column items-stretch justify-stretch">
-        <div class="bg-light-purple flex items-center justify-center pa5-l pa4 false">
-          <img src="/icons/icon-participating.svg">
+        <div class="make-icon bg-light-purple flex items-center justify-center pa5-l pa4 false">
+          {{ partial "icons/icon-community.svg" }}
         </div>
         <div class="bg-white flex flex-column content-start justify-center-ns justify-start order-1-l pa4">
           <h3>Surveys to find out the issues concen your community</h3>
@@ -87,8 +87,8 @@ <h3>Surveys to find out the issues concen your community</h3>
       </section>
 
       <section class="bt w-50-ns false b--black-10 flex flex-column items-stretch justify-stretch">
-        <div class="bg-gold flex items-center justify-center pa5-l pa4 false">
-          <img src="/icons/icon-participating.svg">
+        <div class="make-icon bg-gold flex items-center justify-center pa5-l pa4 false">
+          {{ partial "icons/polis.svg" }}
         </div>
         <div class="bg-white flex flex-column content-start justify-center-ns justify-start order-1-l pa4">
           <h3>AI Powered Surveying Tool</h3>

layouts/partials/icons/icon-community.svg

@@ -17,14 +17,15 @@ <h2 class="fw1 f5 f3-l white-80 measure-wide-l lh-copy mt3 mb4">
         {{ end }}
       </div>
 
+      {{/* Only display overview on the homepage */}}
       {{ if eq (relURL .URL) ("/" | safeHTML) }}
         <section class="cf mb4 ph3 ph4-ns">
           <ul class="list pa0 ma0 flex flex-wrap-m mw9">
             {{ range .Site.Data.HomeOverview.Overview }}
-              {{ $icon := .Icon }}
+              {{ $icon_size := "32px" }}
               <li class="white-90 flex pv4 w-50-ns">
                 <div class="overview-icon mb1 ml1">
-                  <img src="{{ $icon }}">
+                  {{ partial .Icon }}
                 </div>
                 <p class="tl measure-narrow ph3">{{ .Text }}</p>
               </li>

static/icons/icon-connecting.svg layouts/partials/icons/icon-connecting.svg

@@ -46,3 +46,9 @@ a {
   width: 5rem;
   height: 5rem;
 }
+
+.make-icon svg {
+  width: 5rem;
+  height: 5rem;
+  fill: #ffffff;
+}