icon names refactor

packages/web/src/appobj/AppObjects.js

@@ -68,7 +68,7 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <FontIcon icon="mdi mdi-loading mdi-spin" /> : <FontIcon icon={icon} />}</IconWrap>
+      <IconWrap>{isBusy ? <FontIcon icon="icon loading" /> : <FontIcon icon={icon} />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>

packages/web/src/appobj/MacroAppObject.js

@@ -3,7 +3,7 @@ import { filterName } from '@dbgate/datalib';
 
 const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
   const key = name;
-  const icon = 'mdi mdi-hammer-wrench';
+  const icon = 'img macro';
   const matcher = (filter) => filterName(filter, name, title);
   const groupTitle = group;
 

packages/web/src/appobj/archiveFileAppObject.js

@@ -6,12 +6,10 @@ import { openNewTab } from '../utility/common';
 import { filterName } from '@dbgate/datalib';
 import axios from '../utility/axios';
 
-const archiveTableIcon = 'mdi mdi-table color-yellow-icon';
-
 function openArchive(setOpenedTabs, fileName, folderName) {
   openNewTab(setOpenedTabs, {
     title: fileName,
-    icon: archiveTableIcon,
+    icon: 'img archive',
     tooltip: `${folderName}\n${fileName}`,
     tabComponent: 'ArchiveFileTab',
     props: {
@@ -34,7 +32,7 @@ function Menu({ data, setOpenedTabs }) {
 
     openNewTab(setOpenedTabs, {
       title: data.fileName,
-      icon: archiveTableIcon,
+      icon: 'img archive',
       tabComponent: 'FreeTableTab',
       props: {
         initialData: {
@@ -61,7 +59,7 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs }) => {
   const key = fileName;
-  const icon = archiveTableIcon;
+  const icon = 'img archive';
   const onClick = () => {
     openArchive(setOpenedTabs, fileName, folderName);
   };

packages/web/src/appobj/archiveFolderAppObject.js

@@ -18,7 +18,7 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFolderAppObject = () => ({ name }, { setOpenedTabs, currentArchive }) => {
   const key = name;
-  const icon = 'mdi mdi-database-outline color-green-icon';
+  const icon = 'img archive-folder';
   const isBold = name == currentArchive;
   const matcher = (filter) => filterName(filter, name);
 

packages/web/src/appobj/columnAppObject.js

@@ -1,7 +1,7 @@
 /** @param columnProps {import('@dbgate/types').ColumnInfo} */
 function getColumnIcon(columnProps) {
-  if (columnProps.autoIncrement) return 'mdi mdi-numeric-1-box-multiple-outline';
-  return 'mdi mdi-table-column';
+  if (columnProps.autoIncrement) return 'img autoincrement';
+  return 'img column';
 }
 
 /** @param columnProps {import('@dbgate/types').ColumnInfo} */

packages/web/src/appobj/connectionAppObject.js

@@ -61,7 +61,7 @@ const connectionAppObject = (flags) => (
   const title = displayName || server;
   const key = _id;
   const isExpandable = openedConnections.includes(_id);
-  const icon = 'mdi mdi-server color-blue-icon';
+  const icon = 'img server';
   const matcher = (filter) => filterName(filter, displayName, server);
   const { boldCurrentDatabase } = flags || {};
   const isBold = boldCurrentDatabase
@@ -74,10 +74,10 @@ const connectionAppObject = (flags) => (
   let statusIcon = null;
   let statusTitle = null;
   if (openedConnections.includes(_id)) {
-    if (!status) statusIcon = 'mdi mdi-loading mdi-spin';
-    else if (status.name == 'pending') statusIcon = 'mdi mdi-loading mdi-spin';
-    else if (status.name == 'ok') statusIcon = 'mdi mdi-check-circle color-green';
-    else statusIcon = 'mdi mdi-close-circle color-red';
+    if (!status) statusIcon = 'icon loading';
+    else if (status.name == 'pending') statusIcon = 'icon loading';
+    else if (status.name == 'ok') statusIcon = 'img green-ok';
+    else statusIcon = 'img red-error';
     if (status && status.name == 'error') {
       statusTitle = status.message;
     }

packages/web/src/appobj/constraintAppObject.js

@@ -1,7 +1,7 @@
 /** @param props {import('@dbgate/types').ConstraintInfo} */
 function getConstraintIcon(props) {
-  if (props.constraintType == 'primaryKey') return 'mdi mdi-key-star color-yellow-icon';
-  if (props.constraintType == 'foreignKey') return 'mdi mdi-key-link';
+  if (props.constraintType == 'primaryKey') return 'img primary-key';
+  if (props.constraintType == 'foreignKey') return 'img foreign-key';
   return null;
 }
 

packages/web/src/appobj/databaseAppObject.js

@@ -11,7 +11,7 @@ function Menu({ data, setOpenedTabs, showModal }) {
   const handleNewQuery = () => {
     openNewTab(setOpenedTabs, {
       title: 'Query',
-      icon: 'mdi mdi-file',
+      icon: 'img sql-file',
       tooltip,
       tabComponent: 'QueryTab',
       props: {
@@ -62,7 +62,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
   const { boldCurrentDatabase } = flags || {};
   const title = name;
   const key = name;
-  const icon = 'mdi mdi-database color-yellow-icon';
+  const icon = 'img database';
   const isBold = boldCurrentDatabase
     ? ({ currentDatabase }) => {
         return (

packages/web/src/appobj/databaseObjectAppObject.js

@@ -8,10 +8,10 @@ import { filterName } from '@dbgate/datalib';
 import ImportExportModal from '../modals/ImportExportModal';
 
 const icons = {
-  tables: 'mdi mdi-table color-blue-icon',
-  views: 'mdi mdi-table color-magenta-icon',
-  procedures: 'mdi mdi-cog color-blue-icon',
-  functions: 'mdi mdi-function-variant',
+  tables: 'img table',
+  views: 'img view',
+  procedures: 'img procedure',
+  functions: 'img function',
 };
 
 const menus = {
@@ -101,7 +101,7 @@ export async function openDatabaseObjectDetail(
   openNewTab(setOpenedTabs, {
     title: pureName,
     tooltip,
-    icon: sqlTemplate ? 'mdi mdi-file' : icons[objectTypeField],
+    icon: sqlTemplate ? 'img sql-file' : icons[objectTypeField],
     tabComponent: sqlTemplate ? 'QueryTab' : tabComponent,
     props: {
       schemaName,
@@ -138,7 +138,7 @@ function Menu({ data, makeAppObj, setOpenedTabs, showModal }) {
               const coninfo = await getConnectionInfo(data);
               openNewTab(setOpenedTabs, {
                 title: data.pureName,
-                icon: 'mdi mdi-table color-green-icon',
+                icon: 'img free-table',
                 tabComponent: 'FreeTableTab',
                 props: {
                   initialData: {

packages/web/src/appobj/savedSqlFileAppObject.js

@@ -16,7 +16,7 @@ function Menu({ data, setSavedSqlFiles }) {
 const savedSqlFileAppObject = () => ({ name, storageKey }, { setOpenedTabs, newQuery, openedTabs }) => {
   const key = storageKey;
   const title = name;
-  const icon = 'mdi mdi-file';
+  const icon = 'img sql-file';
 
   const onClick = () => {
     const existing = openedTabs.find((x) => x.props && x.props.storageKey == storageKey);