font icons instead of SVG icons

packages/web/src/TabsPanel.js

@@ -265,7 +265,7 @@ export default function TabsPanel() {
                 onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                 onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
               >
-                {tab.busy ? <i className="mdi mdi-loading mdi-spin"></i> : getIconImage(tab.icon)}
+                {<span className={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
                 <FileNameWrapper>{tab.title}</FileNameWrapper>
                 <CloseButton
                   className="mdi mdi-close tabCloseButton"

packages/web/src/appobj/AppObjectList.js

@@ -10,9 +10,9 @@ const SubItemsDiv = styled.div`
 `;
 
 const ExpandIconHolder2 = styled.span`
-  margin-right: 5px;
-  position: relative;
-  top: -3px;
+  margin-right: 3px;
+  // position: relative;
+  // top: -3px;
 `;
 
 const ExpandIconHolder = styled.span`
@@ -71,11 +71,7 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
       prefix={
         SubItems ? (
           <ExpandIconHolder2>
-            {appobj.isExpandable ? (
-              <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
-            ) : (
-              <ExpandIcon isSelected={isHover} isBlank blankColor="#ccc" />
-            )}
+            {appobj.isExpandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
           </ExpandIconHolder2>
         ) : null
       }
@@ -105,7 +101,7 @@ function AppObjectGroup({ group, items }) {
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <ExpandIconHolder>
-          <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
+          <ExpandIcon isExpanded={isExpanded} />
         </ExpandIconHolder>
         {group} {items && `(${items.filter((x) => x.component).length})`}
       </GroupDiv>

packages/web/src/appobj/AppObjects.js

@@ -5,7 +5,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
-import { FontIcon } from '../icons';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
@@ -23,7 +22,7 @@ const AppObjectSpan = styled.span`
 `;
 
 const IconWrap = styled.span`
-  margin-right: 10px;
+  margin-right: 5px;
 `;
 
 const StatusIconWrap = styled.span`
@@ -32,7 +31,7 @@ const StatusIconWrap = styled.span`
 
 export function AppObjectCore({
   title,
-  Icon,
+  icon,
   Menu,
   data,
   makeAppObj,
@@ -68,7 +67,7 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <Icon />}</IconWrap>
+      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <span className={icon} />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>

packages/web/src/appobj/connectionAppObject.js

@@ -1,13 +1,10 @@
 import _ from 'lodash';
 import React from 'react';
-import { getEngineIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import useShowModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
 import { filterName } from '@dbgate/datalib';
 import ConfirmModal from '../modals/ConfirmModal';
-import { useConfig } from '../utility/metadataLoaders';
 import CreateDatabaseModal from '../modals/CreateDatabaseModal';
 
 function Menu({ data, setOpenedConnections, openedConnections, config, showModal }) {
@@ -64,7 +61,7 @@ const connectionAppObject = (flags) => (
   const title = displayName || server;
   const key = _id;
   const isExpandable = openedConnections.includes(_id);
-  const Icon = getEngineIcon(engine);
+  const icon = 'mdi mdi-server color-blue-icon';
   const matcher = (filter) => filterName(filter, displayName, server);
   const { boldCurrentDatabase } = flags || {};
   const isBold = boldCurrentDatabase
@@ -89,7 +86,7 @@ const connectionAppObject = (flags) => (
   return {
     title,
     key,
-    Icon,
+    icon,
     Menu,
     matcher,
     isBold,

packages/web/src/appobj/databaseAppObject.js

@@ -12,7 +12,7 @@ function Menu({ data, setOpenedTabs, showModal }) {
   const handleNewQuery = () => {
     openNewTab(setOpenedTabs, {
       title: 'Query',
-      icon: 'sql.svg',
+      icon: 'mdi mdi-file',
       tooltip,
       tabComponent: 'QueryTab',
       props: {
@@ -63,7 +63,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
   const { boldCurrentDatabase } = flags || {};
   const title = name;
   const key = name;
-  const Icon = DatabaseIcon;
+  const icon = 'mdi mdi-database color-yellow-icon';
   const isBold = boldCurrentDatabase
     ? ({ currentDatabase }) => {
         return (
@@ -72,7 +72,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
       }
     : null;
 
-  return { title, key, Icon, Menu, isBold };
+  return { title, key, icon, Menu, isBold };
 };
 
 export default databaseAppObject;

packages/web/src/appobj/databaseObjectAppObject.js

@@ -9,10 +9,10 @@ import { filterName } from '@dbgate/datalib';
 import ImportExportModal from '../modals/ImportExportModal';
 
 const icons = {
-  tables: 'table2.svg',
-  views: 'view2.svg',
-  procedures: 'procedure2.svg',
-  functions: 'function.svg',
+  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',
 };
 
 const menus = {
@@ -173,7 +173,8 @@ const databaseObjectAppObject = () => (
 ) => {
   const title = schemaName ? `${schemaName}.${pureName}` : pureName;
   const key = title;
-  const Icon = (props) => getIconImage(icons[objectTypeField], props);
+  const icon = icons[objectTypeField];
+  // const Icon = (props) => getIconImage(icons[objectTypeField], props);
   const onClick = ({ schemaName, pureName }) => {
     openDatabaseObjectDetail(
       setOpenedTabs,
@@ -191,7 +192,7 @@ const databaseObjectAppObject = () => (
   const matcher = (filter) => filterName(filter, pureName);
   const groupTitle = _.startCase(objectTypeField);
 
-  return { title, key, Icon, Menu, onClick, matcher, groupTitle };
+  return { title, key, icon, Menu, onClick, matcher, groupTitle };
 };
 
 export default databaseObjectAppObject;

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -4,9 +4,7 @@ import ColumnLabel from './ColumnLabel';
 import DropDownButton from '../widgets/DropDownButton';
 import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
 import { useSplitterDrag } from '../widgets/Splitter';
-import { FontIcon, TableIcon } from '../icons';
 import { isTypeDateTime } from '@dbgate/tools';
-import { openNewTab } from '../utility/common';
 import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject';
 import { useSetOpenedTabs } from '../utility/globalState';
 

packages/web/src/datagrid/ColumnLabel.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { SequenceIcon, ForeignKeyIcon } from '../icons';
 
 const Label = styled.span`
   font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
@@ -11,12 +10,12 @@ const Label = styled.span`
 
 /** @param column {import('@dbgate/datalib').DisplayColumn|import('@dbgate/types').ColumnInfo} */
 export default function ColumnLabel(column) {
-  let Icon = null;
-  if (column.autoIncrement) Icon = SequenceIcon;
-  if (column.foreignKey) Icon = ForeignKeyIcon;
+  let icon = null;
+  if (column.autoIncrement) icon = 'mdi mdi-numeric-1-box-multiple-outline';
+  if (column.foreignKey) icon = 'mdi mdi-key-link';
   return (
     <Label {...column}>
-      {Icon ? <Icon size={12} /> : null} {column.headerText || column.columnName}
+      {icon ? <span className={icon} /> : null} {column.headerText || column.columnName}
     </Label>
   );
 }

packages/web/src/datagrid/ColumnManager.js

@@ -70,7 +70,6 @@ function ColumnManagerRow(props) {
         className="expandColumnIcon"
         isBlank={!column.foreignKey}
         isExpanded={column.foreignKey && display.isExpandedColumn(column.uniqueName)}
-        isSelected={isHover}
         onClick={() => display.toggleExpandedColumn(column.uniqueName)}
       />
       <input

packages/web/src/datagrid/DataGrid.js

@@ -28,7 +28,7 @@ export default function DataGrid(props) {
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
         <WidgetColumnBar>
-          <WidgetColumnBarItem title="Columns" name="columns" height="50%">
+          <WidgetColumnBarItem title="Columns" name="columns" height={props.showReferences ? '40%' : '60%'}>
             <ColumnManager {...props} managerSize={managerSize} />
           </WidgetColumnBarItem>
           {props.showReferences && props.display.hasReferences && (

packages/web/src/datagrid/ReferenceHeader.js

@@ -30,7 +30,7 @@ export default function ReferenceHeader({ reference, onClose }) {
   return (
     <Container>
       <Header>
-        <ReferenceIcon />
+        <span className="mdi mdi-link-box" />
         <HeaderText>
           {reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [
           {reference.columns.map((x) => x.baseName).join(', ')}]

packages/web/src/datagrid/ReferenceManager.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ManagerInnerContainer } from './ManagerStyles';
-import { LinkIcon, ReferenceIcon } from '../icons';
 import SearchInput from '../widgets/SearchInput';
 import { filterName } from '@dbgate/datalib';
 
@@ -31,10 +30,10 @@ const NameContainer = styled.div`
   white-space: nowrap;
 `;
 
-function ManagerRow({ tableName, columns, Icon, onClick }) {
+function ManagerRow({ tableName, columns, icon, onClick }) {
   return (
     <LinkContainer onClick={onClick}>
-      <Icon />
+      <span className={icon} />
       <NameContainer>
         {tableName} ({columns.map((x) => x.columnName).join(', ')})
       </NameContainer>
@@ -64,7 +63,7 @@ export default function ReferenceManager(props) {
               .map((fk) => (
                 <ManagerRow
                   key={fk.constraintName}
-                  Icon={LinkIcon}
+                  icon="mdi mdi-link"
                   tableName={fk.refTableName}
                   columns={fk.columns}
                   onClick={() =>
@@ -89,7 +88,7 @@ export default function ReferenceManager(props) {
               .map((fk) => (
                 <ManagerRow
                   key={fk.constraintName}
-                  Icon={ReferenceIcon}
+                  icon="mdi mdi-link-box"
                   tableName={fk.pureName}
                   columns={fk.columns}
                   onClick={() =>

packages/web/src/icons.js

@@ -43,17 +43,16 @@ export function FontIcon({ icon, ...props }) {
   return <i {...props} className={className} style={style} title={props.title} />;
 }
 
-export function ExpandIcon({
-  isBlank = false,
-  isExpanded = false,
-  isSelected = false,
-  blankColor = 'white',
-  ...other
-}) {
+export function ExpandIcon({ isBlank = false, isExpanded = false, className = '', ...other }) {
   if (isBlank) {
-    return <FontIcon icon={`fas fa-square ${isSelected ? 'lightblue' : blankColor}`} {...other} />;
+    return <span className={`mdi mdi-minus-box-outline icon-invisible ${className}`} {...other} />;
   }
-  return <FontIcon icon={`far ${isExpanded ? 'fa-minus-square' : 'fa-plus-square'} `} {...other} />;
+  return (
+    <span
+      className={`${isExpanded ? 'mdi mdi-minus-box-outline' : 'mdi mdi-plus-box-outline'} ${className}`}
+      {...other}
+    />
+  );
 }
 
 export const TableIcon = (props) => getIconImage('table2.svg', props);

packages/web/src/index.css

@@ -22,3 +22,7 @@ code {
   bottom: 0;
   background-color: #00000080;
 }
+
+.icon-invisible {
+  visibility: hidden;
+}

packages/web/src/themes/ThemeHelmet.js

@@ -9,6 +9,9 @@ export default function ThemeHelmet() {
         .color-green { color: green; }
         .color-on-statusbar-green { color: lime; }
         .color-blue { color: blue; }
+        .color-blue-icon { color: #05A; }
+        .color-magenta-icon { color: #808 }
+        .color-yellow-icon { color: #880 }
         `}</style>
     </Helmet>
   );

packages/web/src/widgets/WidgetStyles.js

@@ -12,7 +12,7 @@ export const SearchBoxWrapper = styled.div`
 export const WidgetsMainContainer = styled.div`
   position: relative;
   display: flex;
-  flex-flow: column wrap;
+  // flex-flow: column wrap;
   flex: 1;
   flex-direction: column;
   user-select: none;