added icon components that I missed

Author: Samantha Kraft

src/components/EventCard.vue

@@ -18,19 +18,20 @@
           </div>
       </h3>
       <div class="upcoming-event__detail">
-        <svgicon name="calendar" height="16" width="16" />
+         <calendar class="svg-icon"></calendar>
         <div class="body1">{{ getDateRange(startDate, endDate) }}</div>
       </div>
       <div v-if="location" class="upcoming-event__detail">
-        <svgicon name="map" height="16" width="16" />
+        <map-icon class="svg-icon"></map-icon>
         <div class="body1">{{ location }}</div>
       </div>
     </div>
   </template>
 
   <script>
   import { format, parseISO } from 'date-fns'
-  
+  import Calendar from './icons/Calendar.vue'
+  import MapIcon from './icons/Map.vue'
   export default {
     name: 'EventCard',
   
@@ -61,7 +62,10 @@
         type: String
       }
     },
-  
+  components:{
+    Calendar,
+    MapIcon
+  },
     methods: {
       /**
        * Get event date range, if there is no end date, default to start date

src/components/icons/Calendar.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 16 17"
+    >
+      <g _fill="#000" fill-rule="nonzero"><path pid="0" d="M6.168 1.482h3.684v1.744H6.168z"/><path pid="1" d="M13.032 3.226h1.242v2.79H1.705v-2.79h1.242V1.482H.021V17H15.98V1.482h-2.947v1.744zM1.705 15.256V7.76h12.59v7.497H1.705z"/><path pid="2" d="M3.726 0H5.41v4.348H3.726zM10.589 0h1.684v4.348h-1.684z"/></g>
+    </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "Calendar",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 17,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
+

src/components/icons/FilterApplied.vue

@@ -6,7 +6,7 @@
       :fill="color"
       viewBox="0 0 24 24"
     >
-      <g data-name="&lt;clipboard&gt;"><path pid="0" d="M20 8H4a1 1 0 010-2h16a1 1 0 010 2zM20 13H7a1 1 0 010-2h10a1 1 0 010 2zM20 18H10a1 1 0 010-2h4a1 1 0 010 2z"/><path pid="1" d="M14 4a2 2 0 0 0-4 0H4.5v18H8a1 1 0 0 0 0-2H6.5V6h2v2h7V6h2v14H12a1 1 0 1 0 0 2h7.5V4z"/></g>
+      <g><path pid="0" d="M20 8H4a1 1 0 010-2h16a1 1 0 010 2zM20 13H7a1 1 0 010-2h10a1 1 0 010 2zM20 18H10a1 1 0 010-2h4a1 1 0 010 2z"/><path pid="1" d="M14 4a2 2 0 0 0-4 0H4.5v18H8a1 1 0 0 0 0-2H6.5V6h2v2h7V6h2v14H12a1 1 0 1 0 0 2h7.5V4z"/></g>
     </svg>
   </template>
 

src/components/icons/Map.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 13 17"
+    >
+      <g _fill="#000" fill-rule="evenodd"><path pid="0" d="M6.478 0C10.072 0 13 2.95 13 6.527c0 4.203-2.485 7.422-5.546 10.104a1.418 1.418 0 01-1.908 0C2.485 13.95 0 10.73 0 6.527 0 2.951 2.928 0 6.478 0zM6.5 4A2.51 2.51 0 019 6.5C9 7.893 7.893 9 6.5 9A2.51 2.51 0 014 6.5C4 5.148 5.148 4 6.5 4z"/></g>
+    </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "MapIcon",
+    props: {
+      width: {
+        type: Number,
+        default: 13,
+      },
+      height: {
+        type: Number,
+        default: 17,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
+