Enhancement: Component to show feather icon

app/javascript/packs/application.js

@@ -7,6 +7,7 @@ import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import axios from 'axios';
+import feather from 'feather-icons';
 // Global Components
 import hljs from 'highlight.js';
 import Multiselect from 'vue-multiselect';
@@ -83,3 +84,5 @@ window.addEventListener('load', () => {
   getAlertAudio();
   initFaviconSwitcher();
 });
+
+feather.replace();

app/javascript/shared/components/FeatherIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <component :is="`icon-${name}`" :size="size"></component>
+</template>
+
+<script>
+import { icons } from 'feather-icons';
+
+const components = Object.values(icons).reduce(
+  (prev, curr) => ({
+    ...prev,
+    [`icon-${curr.name}`]: {
+      props: ['size'],
+      render(createElement) {
+        return createElement('div', {
+          style: { display: 'inline-block' },
+          domProps: {
+            innerHTML: curr.toSvg({ width: this.size, height: this.size }),
+          },
+        });
+      },
+    },
+  }),
+  {}
+);
+
+export default {
+  components,
+  props: {
+    name: {
+      type: String,
+      validator: value => {
+        // eslint-disable-next-line no-prototype-builtins
+        return icons.hasOwnProperty(value);
+      },
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 16,
+    },
+  },
+};
+</script>

package.json

@@ -27,6 +27,7 @@
     "date-fns": "^2.16.1",
     "dompurify": "^2.2.6",
     "dotenv": "^8.0.0",
+    "feather-icons": "^4.28.0",
     "foundation-sites": "~6.5.3",
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",

yarn.lock

@@ -2851,6 +2851,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -3225,6 +3230,11 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.1.3:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.1.tgz#e683963978b6806dcc6c0a4a8bd4ab0bdaf3f21a"
+  integrity sha512-pwCxEXnj27XG47mu7SXAwhLP3L5CrlvCB91ANUkIz40P27kUcvNfSdvyZJ9CLHiVoKSp+TTChMQMSKQEH/IQxA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4642,6 +4652,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+feather-icons@^4.28.0:
+  version "4.28.0"
+  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
+  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
+  dependencies:
+    classnames "^2.2.5"
+    core-js "^3.1.3"
+
 figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"