use eva icons

Author: krushndayshmookh

quasar.config.js

@@ -21,7 +21,7 @@ export default defineConfig((/* ctx */) => {
       // 'ionicons-v4',
       // 'mdi-v7',
       // 'fontawesome-v6',
-      // 'eva-icons',
+      'eva-icons',
       // 'themify',
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

src/layouts/EditorLayout.vue

@@ -2,22 +2,31 @@
   <q-layout view="hHh lpr lFr">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
+        <!-- <q-btn
           flat
           round
           dense
-          icon="menu"
+          icon="eva-menu-outline"
           data-test="toolbar-toggle-left"
           @click="editorStore.toggleSidebarLeft"
-        />
+        /> -->
 
         <q-toolbar-title> AnimatedVG </q-toolbar-title>
 
         <q-btn
           flat
           round
           dense
-          icon="content_copy"
+          icon="eva-arrowhead-left-outline"
+          data-test="toolbar-toggle-left"
+          @click="editorStore.toggleSidebarLeft"
+        />
+
+        <q-btn
+          flat
+          round
+          dense
+          icon="eva-arrowhead-right-outline"
           data-test="toolbar-toggle-right"
           @click="editorStore.toggleSidebarRight"
         />
@@ -26,7 +35,7 @@
           flat
           round
           dense
-          icon="unfold_more"
+          icon="eva-arrowhead-down-outline"
           data-test="toolbar-toggle-bottom"
           @click="editorStore.toggleSidebarBottom"
         />

src/pages/EditorPage.vue

@@ -5,19 +5,27 @@
     <EditorToolbar
       side="left"
       :items="[
-        { name: 'home', icon: 'home', tooltip: 'Home' },
-        { name: 'settings', icon: 'settings', onClick: () => console.log('Settings clicked') },
-        { name: 'help', icon: 'help', onClick: () => console.log('Help clicked') },
+        { name: 'home', icon: 'eva-home-outline', tooltip: 'Home' },
+        {
+          name: 'settings',
+          icon: 'eva-settings-outline',
+          onClick: () => console.log('Settings clicked'),
+        },
+        {
+          name: 'help',
+          icon: 'eva-question-mark-circle-outline',
+          onClick: () => console.log('Help clicked'),
+        },
       ]"
       @toolbar-click="handleToolbarClick"
     />
 
     <EditorToolbar
       side="right"
       :items="[
-        { name: 'undo', icon: 'undo', tooltip: 'Undo' },
-        { name: 'redo', icon: 'redo' },
-        { name: 'save', icon: 'save' },
+        { name: 'undo', icon: 'eva-undo-outline', tooltip: 'Undo' },
+        { name: 'redo', icon: 'eva-undo-outline', tooltip: 'Redo', iconFlip: true },
+        { name: 'save', icon: 'eva-save-outline', tooltip: 'Save' },
       ]"
       @toolbar-click="handleToolbarClick"
     />
@@ -30,9 +38,10 @@
       side="bottom"
       direction="row"
       :items="[
-        { name: 'play', icon: 'play_arrow', tooltip: 'Play' },
-        { name: 'pause', icon: 'pause', tooltip: 'Pause' },
-        { name: 'stop', icon: 'stop', tooltip: 'Stop' },
+        { name: 'play', icon: 'eva-play-circle-outline', tooltip: 'Play' },
+        { name: 'pause', icon: 'eva-pause-circle-outline', tooltip: 'Pause' },
+        { name: 'stop', icon: 'eva-stop-circle-outline', tooltip: 'Stop' },
+        { name: 'add-frame', icon: 'eva-plus-circle-outline', tooltip: 'Add Frame' },
       ]"
       @toolbar-click="handleToolbarClick"
     />