use SVGIcon wrapper for icons (issues with color?)

Author: Jesse Haigh

src/components/Icons/CheckmarkIcon.vue

@@ -9,17 +9,21 @@
 -->
 
 <template>
-  <svg
+  <SVGIcon
     class="checkmark-icon"
     viewBox="0 0 24 24"
+    themeId="checkmark"
   >
     <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-  </svg>
+  </SVGIcon>
 </template>
 
 <script>
+import SVGIcon from 'docc-render/components/SVGIcon.vue';
+
 export default {
   name: 'CheckmarkIcon',
+  components: { SVGIcon },
 };
 </script>
 

src/components/Icons/CopyIcon.vue

@@ -9,20 +9,24 @@
 -->
 
 <template>
-  <svg
+  <SVGIcon
     class="copy-icon"
     viewBox="0 0 24 24"
+    themeId="copy"
   >
     <title>{{ $t('icons.copy') }}</title>
     <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2
       .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0
       16H8V7h11v14z"/>
-  </svg>
+  </SVGIcon>
 </template>
 
 <script>
+import SVGIcon from 'docc-render/components/SVGIcon.vue';
+
 export default {
   name: 'CopyIcon',
+  components: { SVGIcon },
 };
 </script>