feat: svg icons

components/environments/Edit.vue

@@ -25,13 +25,13 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.clear_all')"
-              :icon="clearIcon"
+              :svg="clearIcon"
               class="rounded"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              icon="add"
+              svg="plus"
               :title="$t('add.new')"
               class="rounded"
               @click.native="addEnvironmentVariable"
@@ -61,7 +61,7 @@
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 color="red"
                 @click.native="removeEnvironmentVariable(index)"
               />
@@ -77,7 +77,7 @@
               justify-center
             "
           >
-            <i class="opacity-75 pb-2 material-icons">layers</i>
+            <SmartIcon class="opacity-75 pb-2" name="layers" />
             <span class="text-center pb-4">
               {{ $t("empty.environments") }}
             </span>
@@ -146,7 +146,7 @@ export default defineComponent({
     return {
       name: null as string | null,
       vars: [] as { key: string; value: string }[],
-      clearIcon: "clear_all",
+      clearIcon: "trash-2",
     }
   },
   watch: {
@@ -158,11 +158,11 @@ export default defineComponent({
   methods: {
     clearContent() {
       this.vars = []
-      this.clearIcon = "done"
+      this.clearIcon = "check"
       this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
-      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
+      setTimeout(() => (this.clearIcon = "trash-2"), 1000)
     },
     addEnvironmentVariable() {
       this.vars.push({

components/environments/Environment.vue

@@ -4,7 +4,7 @@
       class="cursor-pointer flex px-4 justify-center items-center"
       @click="$emit('edit-environment')"
     >
-      <i class="material-icons">layers</i>
+      <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
       class="
@@ -28,11 +28,11 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('action.more')"
-            icon="more_vert"
+            svg="more-vertical"
           />
         </template>
         <SmartItem
-          icon="create"
+          svg="edit"
           :label="$t('action.edit')"
           @click.native="
             $emit('edit-environment')
@@ -41,7 +41,7 @@
         />
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
-          icon="delete"
+          svg="trash-2"
           color="red"
           :label="$t('action.delete')"
           @click.native="

components/environments/ImportExport.vue

@@ -12,7 +12,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
               class="rounded"
-              icon="more_vert"
+              svg="more-vertical"
             />
           </template>
           <SmartItem
@@ -57,7 +57,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.replace_current')"
-          icon="folder_special"
+          svg="file"
           :label="$t('action.replace_json')"
           @click.native="openDialogChooseFileToReplaceWith"
         />
@@ -71,7 +71,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
-          icon="create_new_folder"
+          svg="folder-plus"
           :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
@@ -85,7 +85,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          icon="drive_file_move"
+          svg="download"
           :label="$t('export.as_json')"
           @click.native="exportJSON"
         />

components/environments/index.vue

@@ -57,9 +57,9 @@
       </tippy>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
-          icon="add"
+          svg="plus"
           :label="$t('action.new')"
-          class="rounded-none"
+          class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <div class="flex">
@@ -68,11 +68,11 @@
             to="https://docs.hoppscotch.io/features/environments"
             blank
             :title="$t('app.wiki')"
-            icon="help_outline"
+            svg="help-circle"
           />
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            icon="import_export"
+            svg="archive"
             :title="$t('modal.import_export')"
             @click.native="displayModalImportExport(true)"
           />