feat: svg icons

components/collections/graphql/Folder.vue

@@ -13,9 +13,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -36,7 +38,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -53,11 +55,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', { folder, path: folderPath })
@@ -65,7 +67,7 @@
               "
             />
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-folder', { folder, folderPath })
@@ -73,7 +75,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -184,9 +186,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },