#140 node search + convert svg to css

src/components/RunResult/Record/RowNavigator.vue

@@ -1,54 +1,50 @@
 <template>
   <div class="record-navigator">
     <icon-button
+      icon="myicon myicon-edge-arrow"
+      icon-color="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="First row"
       tooltipPosition="top-left"
       class="first"
       @click="$emit('update:modelValue', 0)"
-    >
-      <edge-arrow-icon :disabled="false" />
-    </icon-button>
+    />
     <icon-button
+      icon="myicon myicon-arrow"
+      icon-color="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="Previous row"
       tooltipPosition="top-left"
       class="prev"
       @click="$emit('update:modelValue', modelValue - 1)"
-    >
-      <arrow-icon :disabled="false" />
-    </icon-button>
+    />
     <icon-button
+      icon="myicon myicon-arrow"
+      icon-color="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Next row"
       tooltipPosition="top-left"
       class="next"
       @click="$emit('update:modelValue', modelValue + 1)"
-    >
-      <arrow-icon :disabled="false" />
-    </icon-button>
+    />
     <icon-button
+      icon="myicon myicon-edge-arrow"
+      icon-color="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Last row"
       tooltipPosition="top-left"
       class="last"
       @click="$emit('update:modelValue', total - 1)"
-    >
-      <edge-arrow-icon :disabled="false" />
-    </icon-button>
+    />
   </div>
 </template>
 
 <script>
 import IconButton from '@/components/Common/IconButton'
-import ArrowIcon from '@/components/svg/arrow'
-import EdgeArrowIcon from '@/components/svg/edgeArrow'
 
 export default {
   components: {
-    IconButton,
-    ArrowIcon,
-    EdgeArrowIcon
+    IconButton
   },
   props: {
     modelValue: Number,
@@ -63,8 +59,8 @@ export default {
   display: flex;
 }
 
-.record-navigator .next,
-.record-navigator .last {
+.record-navigator .next :deep(i),
+.record-navigator .last :deep(i) {
   transform: rotate(180deg);
 }
 </style>

src/components/RunResult/index.vue

@@ -64,45 +64,41 @@
 
     <side-tool-bar panel="table" @switch-to="$emit('switchTo', $event)">
       <icon-button
+        icon="myicon myicon-export-to-csv"
         :disabled="!result"
         tooltip="Export result set to CSV file"
         tooltipPosition="top-left"
         @click="exportToCsv"
-      >
-        <export-to-csv-icon />
-      </icon-button>
+      />
 
       <icon-button
         ref="copyToClipboardBtn"
+        icon="myicon myicon-clipboard"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
         tooltipPosition="top-left"
         @click="prepareCopy"
-      >
-        <clipboard-icon />
-      </icon-button>
+      />
 
       <icon-button
         ref="rowBtn"
+        icon="myicon myicon-row"
         :disabled="!result"
         tooltip="View record"
         tooltipPosition="top-left"
         :active="viewRecord"
         @click="toggleViewRecord"
-      >
-        <row-icon />
-      </icon-button>
+      />
 
       <icon-button
         ref="viewCellValueBtn"
+        icon="myicon myicon-view-cell-value"
         :disabled="!result"
         tooltip="View value"
         tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
-      >
-        <view-cell-value-icon />
-      </icon-button>
+      />
     </side-tool-bar>
 
     <loading-dialog
@@ -124,10 +120,6 @@ import SqlTable from '@/components/SqlTable'
 import LoadingIndicator from '@/components/Common/LoadingIndicator'
 import SideToolBar from '@/components/SideToolBar'
 import Splitpanes from '@/components/Common/Splitpanes'
-import ExportToCsvIcon from '@/components/svg/exportToCsv'
-import ClipboardIcon from '@/components/svg/clipboard'
-import ViewCellValueIcon from '@/components/svg/viewCellValue'
-import RowIcon from '@/components/svg/row'
 import IconButton from '@/components/Common/IconButton'
 import csv from '@/lib/csv'
 import fIo from '@/lib/utils/fileIo'
@@ -145,11 +137,7 @@ export default {
     LoadingIndicator,
     Logs,
     SideToolBar,
-    ExportToCsvIcon,
     IconButton,
-    ClipboardIcon,
-    ViewCellValueIcon,
-    RowIcon,
     loadingDialog,
     ValueViewer,
     Record,