using fonticon instead of span

packages/web/src/DragAndDropFileTarget.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from './icons';
 
 const TargetStyled = styled.div`
   position: fixed;
@@ -41,7 +42,7 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
       <TargetStyled>
         <InfoBox>
           <IconWrapper>
-            <span className="mdi mdi-cloud-upload" />
+            <FontIcon icon="icon cloud-upload" />
           </IconWrapper>
           <TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
           <InfoWrapper>Supported file types: csv, MS Excel, json-lines</InfoWrapper>

packages/web/src/TabsPanel.js

@@ -7,6 +7,7 @@ import { DropDownMenuItem, DropDownMenuDivider } from './modals/DropDownMenu';
 import { useOpenedTabs, useSetOpenedTabs, useCurrentDatabase, useSetCurrentDatabase } from './utility/globalState';
 import { showMenu } from './modals/DropDownMenu';
 import { getConnectionInfo } from './utility/metadataLoaders';
+import { FontIcon } from './icons';
 
 // const files = [
 //   { name: 'app.js' },
@@ -116,9 +117,9 @@ function getTabDbKey(tab) {
 }
 
 function getDbIcon(key) {
-  if (key.startsWith('database://')) return 'mdi mdi-database';
+  if (key.startsWith('database://')) return 'icon database';
-  if (key.startsWith('archive://')) return 'mdi mdi-archive';
+  if (key.startsWith('archive://')) return 'icon archive';
-  return 'mdi mdi-file';
+  return 'icon file';
 }
 
 export default function TabsPanel() {
@@ -252,7 +253,7 @@ export default function TabsPanel() {
             selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
             onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
           >
-            <span className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
+            <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
           </DbNameWrapper>
           <DbGroupHandler>
             {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
@@ -264,7 +265,7 @@ export default function TabsPanel() {
                 onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                 onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
               >
-                {<span className={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
+                {<FontIcon icon={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
                 <FileNameWrapper>{tab.title}</FileNameWrapper>
                 <CloseButton
                   className="mdi mdi-close tabCloseButton"

packages/web/src/appobj/AppObjects.js

@@ -3,6 +3,7 @@
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 
@@ -67,11 +68,11 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <span className={icon} />}</IconWrap>
+      <IconWrap>{isBusy ? <FontIcon icon="mdi mdi-loading mdi-spin" /> : <FontIcon icon={icon} />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>
-          <span className={statusIcon} title={statusTitle} />
+          <FontIcon icon={statusIcon} title={statusTitle} />
         </StatusIconWrap>
       )}
     </Component>

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -7,6 +7,7 @@ import { useSplitterDrag } from '../widgets/Splitter';
 import { isTypeDateTime } from '@dbgate/tools';
 import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject';
 import { useSetOpenedTabs } from '../utility/globalState';
+import { FontIcon } from '../icons';
 
 const HeaderDiv = styled.div`
   display: flex;
@@ -85,12 +86,12 @@ export default function ColumnHeaderControl({
         <ColumnLabel {...column} />
         {order == 'ASC' && (
           <IconWrapper>
-            <span className="mdi mdi-sort-alphabetical-ascending color-green" />
+            <FontIcon icon="mdi mdi-sort-alphabetical-ascending color-green" />
           </IconWrapper>
         )}
         {order == 'DESC' && (
           <IconWrapper>
-            <span className="mdi mdi-sort-alphabetical-descending color-green" />
+            <FontIcon icon="mdi mdi-sort-alphabetical-descending color-green" />
           </IconWrapper>
         )}
       </LabelDiv>

packages/web/src/datagrid/ColumnLabel.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Label = styled.span`
   font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
@@ -15,7 +16,7 @@ export default function ColumnLabel(column) {
   if (column.foreignKey) icon = 'mdi mdi-key-link';
   return (
     <Label {...column}>
-      {icon ? <span className={icon} /> : null} {column.headerText || column.columnName}
+      {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}
     </Label>
   );
 }

packages/web/src/datagrid/DataFilterControl.js

@@ -8,6 +8,7 @@ import InlineButton from '../widgets/InlineButton';
 import useShowModal from '../modals/showModal';
 import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
 import SetFilterModal from '../modals/SetFilterModal';
+import { FontIcon } from '../icons';
 // import { $ } from '../../Utility/jquery';
 // import autobind from 'autobind-decorator';
 // import * as React from 'react';
@@ -291,7 +292,7 @@ export default function DataFilterControl({
         autocomplete="off"
       />
       <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-        <span className="mdi mdi-filter" />
+        <FontIcon icon="mdi mdi-filter" />
       </InlineButton>
     </FilterDiv>
   );

packages/web/src/datagrid/DataGridCore.js

@@ -28,6 +28,7 @@ import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
 import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
+import { FontIcon } from '../icons';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -971,7 +972,7 @@ export default function DataGridCore(props) {
               >
                 {filterCount > 0 && (
                   <InlineButton onClick={handleClearFilters} square>
-                    <span className="mdi mdi-filter-off" />
+                    <FontIcon icon="mdi mdi-filter-off" />
                   </InlineButton>
                 )}
               </TableHeaderCell>

packages/web/src/datagrid/ReferenceHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 import styled from 'styled-components';
 import theme from '../theme';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -29,7 +30,7 @@ export default function ReferenceHeader({ reference, onClose }) {
   return (
     <Container>
       <Header>
-        <span className="mdi mdi-link-box" />
+        <FontIcon icon="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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { ManagerInnerContainer } from './ManagerStyles';
 import SearchInput from '../widgets/SearchInput';
 import { filterName } from '@dbgate/datalib';
+import { FontIcon } from '../icons';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -33,7 +34,7 @@ const NameContainer = styled.div`
 function ManagerRow({ tableName, columns, icon, onClick }) {
   return (
     <LinkContainer onClick={onClick}>
-      <span className={icon} />
+      <FontIcon icon={icon} />
       <NameContainer>
         {tableName} ({columns.map((x) => x.columnName).join(', ')})
       </NameContainer>

packages/web/src/freetable/MacroDetail.js

@@ -8,6 +8,7 @@ import MacroParameters from './MacroParameters';
 import { WidgetTitle } from '../widgets/WidgetStyles';
 import { FormButton } from '../utility/forms';
 import FormStyledButton from '../widgets/FormStyledButton';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -62,7 +63,7 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
   return (
     <Container>
       <Header>
-        <span className="mdi mdi-hammer-wrench" />
+        <FontIcon icon="mdi mdi-hammer-wrench" />
         <HeaderText>{selectedMacro.title}</HeaderText>
       </Header>
       <Buttons>

packages/web/src/icons.js

@@ -1,14 +1,30 @@
 import React from 'react';
 import _ from 'lodash';
 
-export function ExpandIcon({ isBlank = false, isExpanded = false, className = '', ...other }) {
+const iconNames = {
-  if (isBlank) {
+  'icon minus-box': 'mdi mdi-minus-box-outline',
-    return <span className={`mdi mdi-minus-box-outline icon-invisible ${className}`} {...other} />;
+  'icon plus-box': 'mdi mdi-plus-box-outline',
+  'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
+  'icon cloud-upload': 'mdi mdi-cloud-upload',
+
+  'icon database': 'mdi mdi-database',
+  'icon archive': 'mdi mdi-archive',
+  'icon file': 'mdi mdi-file',
+};
+
+export function FontIcon({ icon, className = '', ...other }) {
+  if (!icon) return null;
+  let cls = icon;
+  if (icon.startsWith('icon ')) {
+    cls = iconNames[icon];
+    if (!cls) return null;
   }
-  return (
+  return <span className={`${cls} ${className}`} {...other} />;
-    <span
+}
-      className={`${isExpanded ? 'mdi mdi-minus-box-outline' : 'mdi mdi-plus-box-outline'} ${className}`}
+
-      {...other}
+export function ExpandIcon({ isBlank = false, isExpanded = false, ...other }) {
-    />
+  if (isBlank) {
-  );
+    return <FontIcon icon="icon invisible-box" {...other} />;
+  }
+  return <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...other} />;
 }

packages/web/src/impexp/ImportExportConfigurator.js

@@ -23,6 +23,7 @@ import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
 import SqlEditor from '../sqleditor/SqlEditor';
 import { useUploadsProvider } from '../utility/UploadsProvider';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   // max-height: 50vh;
@@ -294,7 +295,7 @@ function SourceName({ name }) {
     <SourceNameWrapper>
       <div>{name}</div>
       <TrashWrapper onClick={handleDelete}>
-        <span className="mdi mdi-delete" />
+        <FontIcon icon="mdi mdi-delete" />
       </TrashWrapper>
     </SourceNameWrapper>
   );
@@ -352,7 +353,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined }) {
           engine={sourceEngine}
         />
         <ArrowWrapper>
-          <span className="mdi mdi-arrow-right" />
+          <FontIcon icon="mdi mdi-arrow-right" />
         </ArrowWrapper>
         <SourceTargetConfig
           direction="target"

packages/web/src/modals/ErrorMessageModal.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
+import { FontIcon } from '../icons';
 
 const Wrapper = styled.div`
 display:flex
@@ -23,7 +24,7 @@ export default function ErrorMessageModal({ modalState, title = 'Error', message
       <ModalContent>
         <Wrapper>
           <IconWrapper>
-            <span className="mdi mdi-close-circle color-red" />
+            <FontIcon icon="mdi mdi-close-circle color-red" />
           </IconWrapper>
           {message}
         </Wrapper>

packages/web/src/modals/ModalHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Wrapper = styled.div`
   font-size: 15pt;
@@ -23,7 +24,7 @@ export default function ModalHeader({ children, modalState }) {
     <Wrapper>
       <div>{children}</div>
       <CloseWrapper onClick={modalState.close}>
-        <span className="mdi mdi-close" />
+        <FontIcon icon="mdi mdi-close" />
       </CloseWrapper>
     </Wrapper>
   );

packages/web/src/widgets/DropDownButton.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
 import InlineButton from './InlineButton';
 
@@ -12,7 +13,7 @@ export default function DropDownButton({ children }) {
 
   return (
     <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-      <span className="mdi mdi-chevron-down" />
+      <FontIcon icon="mdi mdi-chevron-down" />
     </InlineButton>
   );
 }

packages/web/src/widgets/ErrorInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -22,7 +23,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
   if (isSmall) {
     return (
       <ContainerSmall>
-        <span className={icon} />
+        <FontIcon icon={icon} />
         {message}
       </ContainerSmall>
     );
@@ -30,7 +31,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
   return (
     <Container>
       <Icon>
-        <span className={icon} />
+        <FontIcon icon={icon} />
       </Icon>
       {message}
     </Container>

packages/web/src/widgets/LoadingInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -33,7 +34,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   const core = (
     <Container>
       <Spinner>
-        <span className="mdi mdi-loading mdi-spin" />
+        <FontIcon icon="mdi mdi-loading mdi-spin" />
       </Spinner>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
@@ -24,18 +25,18 @@ export default function StatusBar() {
     <Container>
       {name && (
         <Item>
-          <span className="mdi mdi-database" /> {name}
+          <FontIcon icon="mdi mdi-database" /> {name}
         </Item>
       )}
       {(displayName || server) && (
         <Item>
-          <span className='mdi mdi-server'/> {displayName || server}
+          <FontIcon icon='mdi mdi-server'/> {displayName || server}
         </Item>
       )}
 
       {user && (
         <Item>
-          <span className="mdi mdi-account" /> {user}
+          <FontIcon icon="mdi mdi-account" /> {user}
         </Item>
       )}
 
@@ -43,17 +44,17 @@ export default function StatusBar() {
         <Item>
           {status.name == 'pending' && (
             <>
-              <span className="mdi mdi-loading mdi-spin" /> Loading
+              <FontIcon icon="mdi mdi-loading mdi-spin" /> Loading
             </>
           )}
           {status.name == 'ok' && (
             <>
-              <span className="mdi mdi-check-circle color-on-statusbar-green" /> Connected
+              <FontIcon icon="mdi mdi-check-circle color-on-statusbar-green" /> Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <span className="mdi mdi-close-circle color-red" /> Error
+              <FontIcon icon="mdi mdi-close-circle color-red" /> Error
             </>
           )}
         </Item>
@@ -61,7 +62,7 @@ export default function StatusBar() {
       {!connection && (
         <Item>
           <>
-            <span className="mdi mdi-lan-disconnect" /> Not connected
+            <FontIcon icon="mdi mdi-lan-disconnect" /> Not connected
           </>
         </Item>
       )}

packages/web/src/widgets/ToolbarButton.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 import theme from '../theme';
 
 const ButtonDiv = styled.div`
@@ -53,7 +54,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
       <ButtonDivInner patchY={patchY}>
         {icon && (
           <StyledIconSpan disabled={disabled}>
-            <span className={icon} />
+            <FontIcon icon={icon} />
           </StyledIconSpan>
         )}
         {children}

packages/web/src/widgets/WidgetIconPanel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import theme from '../theme';
 import styled from 'styled-components';
 import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
+import { FontIcon } from '../icons';
 
 const IconWrapper = styled.div`
   color: ${theme.widgetMenu.iconFontColor};
@@ -62,7 +63,7 @@ export default function WidgetIconPanel() {
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
           title={title}
         >
-          <span className={icon} />
+          <FontIcon icon={icon} />
         </IconWrapper>
       ))}
     </>