fix: inline icons from @mui/icons-material (#147)

* Remove @mui/icons-material

* Merge all icons to Icons file

Author: rtritto

package.json

@@ -61,7 +61,6 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.4",
     "copy-to-clipboard": "^3.3.3",
     "group-items": "^2.2.0",

rollup.config.ts

@@ -26,7 +26,6 @@ const external = [
   '@emotion/styled',
   '@emotion/react/jsx-runtime',
   '@emotion/react/jsx-dev-runtime',
-  '@mui/icons-material',
   '@mui/material',
   '@mui/material/styles',
   'copy-to-clipboard',

src/components/DataKeyPair.tsx

@@ -1,11 +1,3 @@
-import {
-  Check as CheckIcon,
-  ChevronRight as ChevronRightIcon,
-  Close as CloseIcon,
-  ContentCopy as ContentCopyIcon,
-  Edit as EditIcon,
-  ExpandMore as ExpandMoreIcon
-} from '@mui/icons-material'
 import { Box, styled } from '@mui/material'
 import type React from 'react'
 import { useCallback, useMemo, useState } from 'react'
@@ -17,6 +9,14 @@ import { useJsonViewerStore } from '../stores/JsonViewerStore'
 import { useTypeComponents } from '../stores/typeRegistry'
 import type { DataItemProps } from '../type'
 import { getValueSize } from '../utils'
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  ContentCopyIcon,
+  EditIcon,
+  ExpandMoreIcon
+} from './Icons'
 import { DataBox } from './mui/DataBox'
 
 export type DataKeyPairProps = {

src/components/DataTypes/Object.tsx

@@ -8,7 +8,7 @@ import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
 import { getValueSize } from '../../utils'
 import { DataKeyPair } from '../DataKeyPair'
-import { CircularArrowsIcon } from '../icons/CircularArrowsIcon'
+import { CircularArrowsIcon } from '../Icons'
 import { DataBox } from '../mui/DataBox'
 
 const objectLb = '{'

src/components/Icons.tsx

@@ -0,0 +1,46 @@
+import { SvgIcon, SvgIconProps } from '@mui/material'
+import type React from 'react'
+
+const BaseIcon: React.FC<SvgIconProps> = ({ d, ...props }) => {
+  return (
+    <SvgIcon {...props}>
+      <path d={d}/>
+    </SvgIcon>
+  )
+}
+
+const Check = 'M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'
+const ChevronRight = 'M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'
+const CircularArrows = 'M 12 2 C 10.615 1.998 9.214625 2.2867656 7.890625 2.8847656 L 8.9003906 4.6328125 C 9.9043906 4.2098125 10.957 3.998 12 4 C 15.080783 4 17.738521 5.7633175 19.074219 8.3222656 L 17.125 9 L 21.25 11 L 22.875 7 L 20.998047 7.6523438 C 19.377701 4.3110398 15.95585 2 12 2 z M 6.5097656 4.4882812 L 2.2324219 5.0820312 L 3.734375 6.3808594 C 1.6515335 9.4550558 1.3615962 13.574578 3.3398438 17 C 4.0308437 18.201 4.9801562 19.268234 6.1601562 20.115234 L 7.1699219 18.367188 C 6.3019219 17.710187 5.5922656 16.904 5.0722656 16 C 3.5320014 13.332354 3.729203 10.148679 5.2773438 7.7128906 L 6.8398438 9.0625 L 6.5097656 4.4882812 z M 19.929688 13 C 19.794687 14.08 19.450734 15.098 18.927734 16 C 17.386985 18.668487 14.531361 20.090637 11.646484 19.966797 L 12.035156 17.9375 L 8.2402344 20.511719 L 10.892578 23.917969 L 11.265625 21.966797 C 14.968963 22.233766 18.681899 20.426323 20.660156 17 C 21.355156 15.801 21.805219 14.445 21.949219 13 L 19.929688 13 z'
+const Close = 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
+const ContentCopy = 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'
+const Edit = 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'
+const ExpandMore = 'M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'
+
+export const CheckIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={Check} {...props} />
+}
+
+export const ChevronRightIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={ChevronRight} {...props} />
+}
+
+export const CircularArrowsIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={CircularArrows} {...props} />
+}
+
+export const CloseIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={Close} {...props} />
+}
+
+export const ContentCopyIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={ContentCopy} {...props} />
+}
+
+export const EditIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={Edit} {...props} />
+}
+
+export const ExpandMoreIcon: React.FC<SvgIconProps> = (props) => {
+  return <BaseIcon d={ExpandMore} {...props} />
+}

src/components/icons/CircularArrowsIcon.tsx

@@ -1132,22 +1132,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^5.11.0":
-  version: 5.11.0
-  resolution: "@mui/icons-material@npm:5.11.0"
-  dependencies:
-    "@babel/runtime": ^7.20.6
-  peerDependencies:
-    "@mui/material": ^5.0.0
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 764c1185b3432f0228f3c5217b0e218b10f106fa96d305dfc62c0ef5afd2a7a087b0d664fd0a8171282e195c18d3ee073d5f037901a2bed1a1519a70fbb0501c
-  languageName: node
-  linkType: hard
-
 "@mui/material@npm:^5.11.4":
   version: 5.11.4
   resolution: "@mui/material@npm:5.11.4"
@@ -1820,7 +1804,6 @@ __metadata:
     "@commitlint/config-angular": ^17.4.2
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
-    "@mui/icons-material": ^5.11.0
     "@mui/material": ^5.11.4
     "@rollup/plugin-alias": ^4.0.2
     "@rollup/plugin-commonjs": ^24.0.0