Feat/new icons

package.json

@@ -19,6 +19,7 @@
     "prepack": "rimraf dist && env-cmd npm run meta && electron-builder --dir",
     "pack": "rimraf dist && env-cmd npm run meta && electron-builder",
     "release": "npm run build:electron && rimraf dist && env-cmd npm run meta && env-cmd electron-builder -- --publish",
+    "convertIcons": "rm ./src/components/icons/* && npx @svgr/cli --icon -d ./src/components/icons ./static/icons && node scripts/importIcons.js && rm ./src/components/icons/*.js && prettier --write src/components/icons/*.tsx",
     "test": "jest -c jest.json",
     "test:watch": "jest -c jest.json --watch",
     "tsc": "tsc --watch --noEmit",
@@ -91,6 +92,8 @@
   "dependencies": {
     "@mdi/js": "^4.4.95",
     "@mdi/react": "^1.2.1",
+    "@svgr/cli": "^4.3.3",
+    "@svgr/webpack": "^4.3.3",
     "@types/pouchdb-adapter-http": "^6.1.3",
     "@types/pouchdb-adapter-idb": "^6.1.3",
     "@types/pouchdb-adapter-memory": "^6.1.3",

scripts/importIcons.js

@@ -0,0 +1,63 @@
+const fs = require('fs')
+
+const fillRegex = new RegExp(`fill=[\"\']\#[a-zA-Z0-9]*[\"\']`, 'g')
+
+fs.readdir('src/components/icons', function(err, filenames) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  const exports = []
+  filenames.forEach(function(filename) {
+    exports.push(`export * from './${filename.split('.')[0]}'`)
+    try {
+      fs.readFile(`src/components/icons/${filename}`, 'utf8', function(
+        err,
+        data
+      ) {
+        if (err) {
+          console.log(err)
+          return
+        }
+        const removeFillAttributeSplit = data
+          .split('export default')[0]
+          .replace('const Svg', 'export const Icon')
+          .replace('<svg ', '<BoostnoteIconStyledContainer><svg ')
+          .replace('= props', '= (props: BoostnoteIconProps)')
+          .replace(new RegExp('=1em', 'g'), '=0.9em')
+          .replace(
+            '{...props}',
+            '{...props} style={props.size != null ? {...props.style, width: props.size, height: props.size} : props.style}'
+          )
+          .replace('</svg>', '</svg></BoostnoteIconStyledContainer>')
+          .split(fillRegex)
+        const content = [
+          `import { BoostnoteIconProps, BoostnoteIconStyledContainer } from '../../lib/icons'`,
+          removeFillAttributeSplit.join('fill="currentColor"')
+        ].join(`\n`)
+
+        fs.writeFile(
+          `src/components/icons/${filename.replace('js', 'tsx')}`,
+          content,
+          function(err2) {
+            if (err2) {
+              console.log(err2)
+              return
+            }
+          }
+        )
+      })
+    } catch (err) {
+      console.log('could not convert file')
+    }
+  })
+
+  fs.writeFile('src/components/icons/index.ts', exports.join('\n'), function(
+    err
+  ) {
+    if (err) {
+      console.log(err)
+      return
+    }
+  })
+})

src/components/Modal/index.tsx

@@ -6,10 +6,9 @@ import {
   StyledModalsContainer,
   StyledModalsSkipButton
 } from './styled'
-import Icon from '../atoms/Icon'
-import { mdiChevronRightCircleOutline } from '@mdi/js'
 import { usePreferences } from '../../lib/preferences'
 import DownloadOurAppModal from './contents/DownloadOurAppModal'
+import { IconArrowSingleRight } from '../icons'
 
 interface ModalsRenderingOptions {
   closable: boolean
@@ -80,7 +79,7 @@ export default () => {
         {content.closable && (
           <StyledModalsSkipButton onClick={closeHandler}>
             <span>
-              Skip <Icon className='icon' path={mdiChevronRightCircleOutline} />
+              Skip <IconArrowSingleRight />
             </span>
           </StyledModalsSkipButton>
         )}

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -9,14 +9,6 @@ import TagList from './TagList'
 import styled from '../../../lib/styled'
 import CustomizedCodeEditor from '../../atoms/CustomizedCodeEditor'
 import CustomizedMarkdownPreviewer from '../../atoms/CustomizedMarkdownPreviewer'
-import {
-  mdiTrashCan,
-  mdiEyeOutline,
-  mdiArrowSplitVertical,
-  mdiDeleteEmpty,
-  mdiRestore,
-  mdiPencil
-} from '@mdi/js'
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
 import Toolbar from '../../atoms/Toolbar'
 import ToolbarSeparator from '../../atoms/ToolbarSeparator'
@@ -33,6 +25,13 @@ import { getFileList } from '../../../lib/dnd'
 import { ViewModeType } from '../../../lib/generalStatus'
 import { BreadCrumbs } from '../NotePage'
 import cc from 'classcat'
+import {
+  IconTrash,
+  IconArrowAgain,
+  IconEye,
+  IconSplit,
+  IconEdit
+} from '../../icons'
 
 export const StyledNoteDetailContainer = styled.div`
   ${secondaryBackgroundColor}
@@ -541,33 +540,33 @@ export default class NoteDetail extends React.Component<
                 <ToolbarIconButton
                   className={viewMode === 'edit' ? 'active' : ''}
                   onClick={() => toggleViewMode('edit')}
-                  path={mdiPencil}
+                  icon={<IconEdit />}
                 />
                 <ToolbarIconButton
                   className={viewMode === 'split' ? 'active' : ''}
                   onClick={() => toggleViewMode('split')}
-                  path={mdiArrowSplitVertical}
+                  icon={<IconSplit />}
                 />
                 <ToolbarIconButton
                   className={viewMode === 'preview' ? 'active' : ''}
                   onClick={() => toggleViewMode('preview')}
-                  path={mdiEyeOutline}
+                  icon={<IconEye />}
                 />
                 {note.trashed ? (
                   <>
                     <ToolbarIconButton
                       onClick={this.untrashNote}
-                      path={mdiRestore}
+                      icon={<IconArrowAgain />}
                     />
                     <ToolbarIconButton
                       onClick={this.purgeNote}
-                      path={mdiDeleteEmpty}
+                      icon={<IconTrash />}
                     />
                   </>
                 ) : (
                   <ToolbarIconButton
                     onClick={this.trashNote}
-                    path={mdiTrashCan}
+                    icon={<IconTrash />}
                   />
                 )}
                 <ToolbarExportButton note={this.props.note} />

src/components/NotePage/NoteDetail/TagList.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
-import Icon from '../../atoms/Icon'
-import { mdiClose, mdiTagOutline } from '@mdi/js'
+import ButtonIcon from '../../atoms/ButtonIcon'
 import styled from '../../../lib/styled'
 import { iconColor, inputStyle } from '../../../lib/styled/styleFunctions'
+import { IconTag, IconClose } from '../../icons'
 
 interface TagListItemProps {
   tagName: string
@@ -18,7 +18,7 @@ const TagListItem = ({ tagName, removeTagByName }: TagListItemProps) => {
     <div className='listItem'>
       <div className='listItem-label'>{tagName}</div>
       <button className='listItem-removeButton' onClick={removeTag}>
-        <Icon path={mdiClose} />
+        <IconClose />
       </button>
     </div>
   )
@@ -52,6 +52,10 @@ const StyledContainer = styled.div`
     justify-content: center;
     ${iconColor};
     background-color: transparent;
+
+    svg {
+      vertical-align: top;
+    }
   }
 `
 
@@ -63,7 +67,7 @@ interface TagListProps {
 const TagList = ({ tags, removeTagByName }: TagListProps) => {
   return (
     <StyledContainer>
-      <Icon className='icon' path={mdiTagOutline} />
+      <ButtonIcon className='icon' icon={<IconTag />} />
       {tags.map(tag => (
         <TagListItem
           tagName={tag}

src/components/NotePage/NoteList/NoteList.tsx

@@ -7,13 +7,12 @@ import React, {
 import NoteItem from './NoteItem'
 import { NoteDoc } from '../../../lib/db/types'
 import styled from '../../../lib/styled'
-import { mdiMagnify, mdiSquareEditOutline } from '@mdi/js'
-import Icon from '../../atoms/Icon'
 import {
   borderBottom,
   inputStyle,
   iconColor
 } from '../../../lib/styled/styleFunctions'
+import { IconEdit, IconLoupe } from '../../icons'
 
 export const StyledNoteListContainer = styled.div`
   display: flex;
@@ -130,10 +129,10 @@ const NoteList = ({
             onChange={updateSearchInput}
             placeholder='Search Notes'
           />
-          <Icon className='icon' path={mdiMagnify} />
+          <IconLoupe className='icon' size='0.8em' />
         </div>
         <button className='newNoteButton' onClick={createNote}>
-          <Icon path={mdiSquareEditOutline} />
+          <IconEdit size='0.8em' />
         </button>
       </div>
       <ul tabIndex={0} onKeyDown={handleListKeyDown} ref={listRef}>

src/components/PreferencesModal/GeneralTab.tsx

@@ -1,6 +1,4 @@
 import React, { useCallback } from 'react'
-import Icon from '../atoms/Icon'
-import { mdiLoading } from '@mdi/js'
 import {
   Section,
   SectionHeader,
@@ -21,6 +19,7 @@ import { useUsers } from '../../lib/accounts'
 import UserInfo from './UserInfo'
 import LoginButton from '../atoms/LoginButton'
 import { useAnalytics, analyticsEvents } from '../../lib/analytics'
+import { IconArrowRotate } from '../icons'
 
 const GeneralTab = () => {
   const { preferences, setPreferences } = usePreferences()
@@ -84,7 +83,7 @@ const GeneralTab = () => {
                   <>{t('preferences.addAccount')}</>
                 ) : (
                   <>
-                    <Icon path={mdiLoading} />
+                    <IconArrowRotate />
                     {t('preferences.loginWorking')}
                   </>
                 )

src/components/PreferencesModal/PreferencesModal.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useMemo } from 'react'
 import styled from '../../lib/styled'
-import Icon from '../atoms/Icon'
-import { mdiClose } from '@mdi/js'
 import { usePreferences } from '../../lib/preferences'
 import TabButton from './TabButton'
 import { useGlobalKeyDownHandler } from '../../lib/keyboard'
@@ -10,8 +8,9 @@ import EditorTab from './EditorTab'
 import MarkdownTab from './MarkdownTab'
 import AboutTab from './AboutTab'
 import BillingTab from './BillingTab'
-import { backgroundColor, iconColor } from '../../lib/styled/styleFunctions'
 import ImportTab from './ImportTab'
+import { backgroundColor, iconColor } from '../../lib/styled/styleFunctions'
+import { IconClose } from '../icons'
 
 const Container = styled.div`
   z-index: 7000;
@@ -139,7 +138,7 @@ const PreferencesModal = () => {
       </TabNav>
       <TabContent>{content}</TabContent>
       <CloseButton onClick={toggleClosed}>
-        <Icon path={mdiClose} />
+        <IconClose />
       </CloseButton>
     </Container>
   )

src/components/SideNavigator/ControlButton.tsx

@@ -1,42 +1,34 @@
 import React from 'react'
 import styled from '../../lib/styled'
-import Icon from '../atoms/Icon'
 import {
   sideBarTextColor,
   sideBarSecondaryTextColor
 } from '../../lib/styled/styleFunctions'
 
 const StyledButton = styled.button`
   width: 30px;
-  height: 30px;
   padding: 0;
   border: none;
   background-color: transparent;
   border-radius: 2px;
-  top: 2px;
   font-size: 20px;
+  line-height: 20px;
   cursor: pointer;
   ${sideBarTextColor}
+  vertical-align: middle;
   ${sideBarSecondaryTextColor}
   &:hover, &:active, &:focus {
     box-shadow: none;
   }
-  svg {
-    vertical-align: middle;
-  }
 `
 
 interface ControlButtonProps {
-  iconPath: string
+  icon: React.ReactNode
   onClick?: (event: React.MouseEvent) => void
 }
 
-const ControlButton = ({ iconPath, onClick }: ControlButtonProps) => {
-  return (
-    <StyledButton onClick={onClick}>
-      <Icon path={iconPath} />
-    </StyledButton>
-  )
+const ControlButton = ({ icon, onClick }: ControlButtonProps) => {
+  return <StyledButton onClick={onClick}>{icon}</StyledButton>
 }
 
 export default ControlButton

src/components/SideNavigator/FolderListFragment.tsx

@@ -1,12 +1,5 @@
 import React, { useMemo } from 'react'
 import { useDb } from '../../lib/db'
-import {
-  mdiFolderOutline,
-  mdiFolderOpenOutline,
-  mdiPlusCircleOutline,
-  mdiBookOpen,
-  mdiBookOpenOutline
-} from '@mdi/js'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import SideNavigatorItem from './SideNavigatorItem'
@@ -16,6 +9,7 @@ import { useGeneralStatus } from '../../lib/generalStatus'
 import ControlButton from './ControlButton'
 import { getFolderItemId } from '../../lib/nav'
 import { getTransferrableNoteData } from '../../lib/dnd'
+import { IconAddRound, IconBook, IconFile, IconFileOpen } from '../icons'
 
 interface FolderListFragmentProps {
   storage: NoteStorage
@@ -185,8 +179,14 @@ const FolderListFragment = ({
       <SideNavigatorItem
         depth={1}
         active={rootFolderIsActive}
-        iconPath={rootFolderIsActive ? mdiBookOpen : mdiBookOpenOutline}
         label='All Notes'
+        icon={
+          rootFolderIsActive ? (
+            <IconBook color='currentColor' />
+          ) : (
+            <IconBook color='currentColor' />
+          )
+        }
         onClick={createOnFolderItemClickHandler('/')}
         onDragOver={event => {
           event.preventDefault()
@@ -211,7 +211,7 @@ const FolderListFragment = ({
             folded={folded}
             depth={depth}
             active={folderIsActive}
-            iconPath={folderIsActive ? mdiFolderOpenOutline : mdiFolderOutline}
+            icon={folderIsActive ? <IconFileOpen size='1.3em' /> : <IconFile />}
             label={folderName}
             onClick={createOnFolderItemClickHandler(folderPathname)}
             onDoubleClick={() => showPromptToRenameFolder(folderPathname)}
@@ -224,7 +224,7 @@ const FolderListFragment = ({
               <ControlButton
                 key='addFolderButton'
                 onClick={() => showPromptToCreateFolder(folderPathname)}
-                iconPath={mdiPlusCircleOutline}
+                icon={<IconAddRound />}
               />
             ]}
             onDragOver={event => {