Remove Icons package

js/Components/ButtonWithDropdown.vue

@@ -1,5 +1,4 @@
 <script>
-import OnClickOutside from "./OnClickOutside.vue";
 import { createPopper } from "@popperjs/core/lib/popper-lite";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import flip from "@popperjs/core/lib/modifiers/flip";
@@ -25,10 +24,6 @@ export default {
     },
   },
 
-  components: {
-    OnClickOutside,
-  },
-
   data() {
     return {
       opened: false,
@@ -53,6 +48,10 @@ export default {
   },
 
   mounted() {
+    if (!this.$refs.button || !this.$refs.tooltip) {
+      return;
+    }
+
     this.popper = createPopper(this.$refs.button, this.$refs.tooltip, {
       placement: this.placement,
       modifiers: [flip, preventOverflow],

js/Tailwind2/Pagination.vue

@@ -38,7 +38,18 @@
             class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
           >
             <span class="sr-only">Previous</span>
-            <ChevronLeftIcon class="h-5 w-5" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
           </component>
 
           <div v-for="(link, key) in meta.links" :key="key">
@@ -59,7 +70,18 @@
             class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
           >
             <span class="sr-only">Next</span>
-            <ChevronRightIcon class="h-5 w-5" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
           </component>
         </nav>
       </div>
@@ -68,15 +90,9 @@
 </template>
 
 <script>
-import { ChevronLeftIcon, ChevronRightIcon } from "@vue-hero-icons/solid";
 import Pagination from "./../Components/Pagination.vue";
 
 export default {
   mixins: [Pagination],
-
-  components: {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-  },
 };
 </script>

js/Tailwind2/TableAddSearchRow.vue

@@ -1,7 +1,20 @@
 <template>
   <ButtonWithDropdown ref="dropdown" :disabled="!rowsLeft" class="w-auto">
     <template #button>
-      <PlusCircleIcon class="h-5 w-5 mr-2 text-gray-400" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 mr-2 text-gray-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
       <span>Filter</span>
     </template>
 
@@ -24,15 +37,13 @@
 import ButtonWithDropdown from "./ButtonWithDropdown.vue";
 import OnClickOutside from "./../Components/OnClickOutside.vue";
 import TableAddSearchRow from "./../Components/TableAddSearchRow.vue";
-import { PlusCircleIcon } from "@vue-hero-icons/outline";
 
 export default {
   mixins: [TableAddSearchRow],
 
   components: {
     ButtonWithDropdown,
     OnClickOutside,
-    PlusCircleIcon,
   },
 };
 </script>

js/Tailwind2/TableColumns.vue

@@ -1,10 +1,17 @@
 <template>
   <ButtonWithDropdown placement="bottom-end" :active="hasDisabledFilter">
     <template #button>
-      <DotsVerticalIcon
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
         class="h-5 w-5"
         :class="{'text-gray-400': !hasDisabledFilter, 'text-green-400': hasDisabledFilter}"
-      />
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+        />
+      </svg>
     </template>
 
     <div role="menu" aria-orientation="vertical" aria-labelledby="sort-menu">
@@ -47,14 +54,12 @@
 <script>
 import ButtonWithDropdown from "./ButtonWithDropdown.vue";
 import TableColumns from "./../Components/TableColumns.vue";
-import { DotsVerticalIcon } from "@vue-hero-icons/solid";
 
 export default {
   mixins: [TableColumns],
 
   components: {
     ButtonWithDropdown,
-    DotsVerticalIcon,
   },
 };
 </script>

js/Tailwind2/TableFilter.vue

@@ -1,10 +1,19 @@
 <template>
   <ButtonWithDropdown placement="bottom-end" :active="hasEnabledFilter">
     <template #button>
-      <FilterIcon
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
         class="h-5 w-5"
         :class="{'text-gray-400': !hasEnabledFilter, 'text-green-400': hasEnabledFilter}"
-      />
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
+          clip-rule="evenodd"
+        />
+      </svg>
     </template>
 
     <div role="menu" aria-orientation="vertical" aria-labelledby="sort-menu">
@@ -27,14 +36,12 @@
 <script>
 import ButtonWithDropdown from "./ButtonWithDropdown.vue";
 import TableFilter from "./../Components/TableFilter.vue";
-import { FilterIcon } from "@vue-hero-icons/solid";
 
 export default {
   mixins: [TableFilter],
 
   components: {
     ButtonWithDropdown,
-    FilterIcon,
   },
 };
 </script>

js/Tailwind2/TableGlobalSearch.vue

@@ -8,20 +8,26 @@
       @input="onChange($event.target.value)"
     />
     <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-      <SearchIcon class="h-5 w-5 text-gray-400" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 text-gray-400"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          clip-rule="evenodd"
+        />
+      </svg>
     </div>
   </div>
 </template>
 
 <script>
 import TableGlobalSearch from "./../Components/TableGlobalSearch.vue";
-import { SearchIcon } from "@vue-hero-icons/solid";
 
 export default {
   mixins: [TableGlobalSearch],
-
-  components: {
-    SearchIcon,
-  },
 };
 </script>

js/Tailwind2/TableSearchRows.vue

@@ -26,7 +26,20 @@
                 class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
               >
                 <span class="sr-only">Remove search</span>
-                <XIcon class="h-5 w-5" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
               </button>
             </div>
           </div>
@@ -38,13 +51,8 @@
 
 <script>
 import TableSearchRows from "./../Components/TableSearchRows.vue";
-import { XIcon } from "@vue-hero-icons/outline";
 
 export default {
   mixins: [TableSearchRows],
-
-  components: {
-    XIcon,
-  },
 };
 </script>