Switch to individual react-icons imports to reduce editor bundle size

AndrewPrifer · Dec 27, 2020 · 281bb5f · 281bb5f
1 parent 73b7b9f
commit 281bb5f
Show file tree

Hide file tree

Showing 18 changed files with 50 additions and 51 deletions.
diff --git a/example/.eslintcache b/example/.eslintcache
@@ -1 +1 @@
-[{"/Users/andrew/Projects/react-three-editable/example/src/App.tsx":"1"},{"size":1528,"mtime":1606751994518,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"6"},"ic4nhf","/Users/andrew/Projects/react-three-editable/example/src/App.tsx",["7"],"import React from 'react';\nimport { Canvas } from 'react-three-fiber';\nimport { EditableManager, editable as e, configure } from '../../';\nimport { PerspectiveCamera } from '@react-three/drei';\n\nconst ECamera = e(PerspectiveCamera, 'perspectiveCamera');\n\nfunction App() {\n  return (\n    <Canvas shadowMap>\n      <EditableManager />\n      <ECamera makeDefault uniqueName=\"Camera\" />\n      <e.spotLight\n        uniqueName=\"Key Light\"\n        shadow-mapSize-width={2048}\n        shadow-mapSize-height={2048}\n        castShadow\n      />\n      <e.spotLight\n        uniqueName=\"Fill Light\"\n        shadow-mapSize-width={2048}\n        shadow-mapSize-height={2048}\n        castShadow\n      />\n      <e.mesh uniqueName=\"Ground\" receiveShadow>\n        <planeBufferGeometry />\n        <meshStandardMaterial color=\"lightblue\" />\n      </e.mesh>\n      <e.group uniqueName=\"Ice Cream\">\n        <e.mesh uniqueName=\"Cone\" castShadow>\n          <coneBufferGeometry />\n          <meshStandardMaterial color=\"orange\" />\n        </e.mesh>\n        <e.mesh uniqueName=\"Scoop 1\" castShadow>\n          <sphereBufferGeometry />\n          <meshStandardMaterial color=\"red\" />\n        </e.mesh>\n        <e.mesh uniqueName=\"Scoop 2\" castShadow>\n          <sphereBufferGeometry />\n          <meshStandardMaterial color=\"green\" />\n        </e.mesh>\n        <e.mesh uniqueName=\"Scoop 3\" castShadow>\n          <sphereBufferGeometry />\n          <meshStandardMaterial color=\"blue\" />\n        </e.mesh>\n      </e.group>\n    </Canvas>\n  );\n}\n\nexport default App;\n",{"ruleId":"8","severity":1,"message":"9","line":3,"column":42,"nodeType":"10","messageId":"11","endLine":3,"endColumn":51},"@typescript-eslint/no-unused-vars","'configure' is defined but never used.","Identifier","unusedVar"]
+[{"/Users/andrew/Projects/react-three-editable/example/src/App.tsx":"1"},{"size":1531,"mtime":1609089394049,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1e3o450","/Users/andrew/Projects/react-three-editable/example/src/App.tsx",[]]
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Canvas } from 'react-three-fiber';
-import { EditableManager, editable as e, configure } from '../../';
+import { editable as e, configure } from '../../';
 import { PerspectiveCamera } from '@react-three/drei';
 
+const bind = configure();
+
 const ECamera = e(PerspectiveCamera, 'perspectiveCamera');
 
 function App() {
   return (
-    <Canvas shadowMap>
-      <EditableManager />
+    <Canvas shadowMap onCreated={bind()}>
       <ECamera makeDefault uniqueName="Camera" />
       <e.spotLight
         uniqueName="Key Light"

diff --git a/package.json b/package.json
@@ -93,14 +93,14 @@
     "typescript": "4.0.5"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "@react-three/drei": "^2.2.10",
     "@types/file-saver": "^2.0.1",
     "fast-deep-equal": "^3.1.3",
     "file-saver": "^2.0.2",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",
     "react-hook-form": "^6.11.0",
-    "react-icons": "^3.11.0",
     "react-merge-refs": "^1.1.0",
     "react-shadow": "^18.5.1",
     "react-use-measure": "^2.0.3",

diff --git a/src/components/EditableProxy.tsx b/src/components/EditableProxy.tsx
@@ -17,15 +17,13 @@ import React, {
 import { useHelper, Sphere, Html } from '@react-three/drei';
 import { EditableType, useEditorStore } from '../store';
 import shallow from 'zustand/shallow';
-import {
-  BiSun,
-  BsCameraVideoFill,
-  BsFillCollectionFill,
-  GiCube,
-  GiLightBulb,
-  GiLightProjector,
-} from 'react-icons/all';
-import { IconType } from 'react-icons';
+import { BsFillCollectionFill } from '@react-icons/all-files/bs/BsFillCollectionFill';
+import { GiLightProjector } from '@react-icons/all-files/gi/GiLightProjector';
+import { BiSun } from '@react-icons/all-files/bi/BiSun';
+import { GiCube } from '@react-icons/all-files/gi/GiCube';
+import { GiLightBulb } from '@react-icons/all-files/gi/GiLightBulb';
+import { BsCameraVideoFill } from '@react-icons/all-files/bs/BsCameraVideoFill';
+import { IconType } from '@react-icons/all-files';
 
 export interface EditableProxyProps {
   editableName: string;

diff --git a/src/components/EnvironmentPreview.tsx b/src/components/EnvironmentPreview.tsx
@@ -2,7 +2,7 @@ import React, { VFC, Suspense } from 'react';
 import { Canvas } from 'react-three-fiber';
 import { Environment, OrbitControls, TorusKnot } from '@react-three/drei';
 import { Clickable, ClickableProps } from 'reakit';
-import { IoIosClose } from 'react-icons/all';
+import { IoIosClose } from '@react-icons/all-files/io/IoIosClose';
 
 export interface EnvironmentPreviewProps extends ClickableProps {
   url: string | null;

diff --git a/src/components/PropertiesPanel.tsx b/src/components/PropertiesPanel.tsx
@@ -10,8 +10,8 @@ import {
   Legend,
   VisuallyHidden,
 } from './elements';
-import { MdRestore } from 'react-icons/all';
 import { Button } from 'reakit';
+import { MdRestore } from '@react-icons/all-files/md/MdRestore';
 
 interface Vector3InputProps {
   register: UseFormMethods['register'];

diff --git a/src/components/SceneOutlinePanel.tsx b/src/components/SceneOutlinePanel.tsx
@@ -1,16 +1,14 @@
 import React, { ReactElement, VFC } from 'react';
 import { EditableType, useEditorStore } from '../store';
-import { IconType } from 'react-icons';
 import shallow from 'zustand/shallow';
-import {
-  BiSun,
-  BsCameraVideoFill,
-  BsFillCollectionFill,
-  GiCube,
-  GiLightBulb,
-  GiLightProjector,
-} from 'react-icons/all';
 import { Button as ButtonImpl, ButtonProps, Group } from 'reakit';
+import { IconType } from '@react-icons/all-files';
+import { BsFillCollectionFill } from '@react-icons/all-files/bs/BsFillCollectionFill';
+import { GiLightProjector } from '@react-icons/all-files/gi/GiLightProjector';
+import { BiSun } from '@react-icons/all-files/bi/BiSun';
+import { GiCube } from '@react-icons/all-files/gi/GiCube';
+import { GiLightBulb } from '@react-icons/all-files/gi/GiLightBulb';
+import { BsCameraVideoFill } from '@react-icons/all-files/bs/BsCameraVideoFill';
 import { Heading, Button } from './elements';
 
 interface ObjectButtonProps extends ButtonProps {

diff --git a/src/components/TransformControlsModeSelect.tsx b/src/components/TransformControlsModeSelect.tsx
@@ -1,5 +1,7 @@
 import React, { VFC } from 'react';
-import { GiClockwiseRotation, GiMove, GiResize } from 'react-icons/all';
+import { GiResize } from '@react-icons/all-files/gi/GiResize';
+import { GiMove } from '@react-icons/all-files/gi/GiMove';
+import { GiClockwiseRotation } from '@react-icons/all-files/gi/GiClockwiseRotation';
 import { TransformControlsMode } from '../store';
 import { CompactModeSelect } from './elements';
 

diff --git a/src/components/TransformControlsSpaceSelect.tsx b/src/components/TransformControlsSpaceSelect.tsx
@@ -1,7 +1,8 @@
 import React, { VFC } from 'react';
 import { TransformControlsSpace } from '../store';
-import { BiCube, BiGlobe } from 'react-icons/all';
 import { CompactModeSelect } from './elements';
+import { BiGlobe } from '@react-icons/all-files/bi/BiGlobe';
+import { BiCube } from '@react-icons/all-files/bi/BiCube';
 
 export interface TransformControlsSpaceSelectProps {
   value: TransformControlsSpace;

diff --git a/src/components/UI.tsx b/src/components/UI.tsx
@@ -4,12 +4,14 @@ import { useEditorStore } from '../store';
 import shallow from 'zustand/shallow';
 import ReferenceWindow from './ReferenceWindow';
 import { saveAs } from 'file-saver';
+import { Vector3 } from 'three';
+import { RiFocus3Line } from '@react-icons/all-files/ri/RiFocus3Line';
+import { GiPocketBow } from '@react-icons/all-files/gi/GiPocketBow';
+import { AiFillEye } from '@react-icons/all-files/ai/AiFillEye';
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect';
 import ViewportShadingSelect from './ViewportShadingSelect';
 import SceneOutlinePanel from './SceneOutlinePanel';
 import PropertiesPanel from './PropertiesPanel';
-import { AiFillEye, GiPocketBow, RiFocus3Line } from 'react-icons/all';
-import { Vector3 } from 'three';
 import { IconButton, Button, SettingsButton } from './elements';
 import ViewportSettings from './ViewportSettings';
 

diff --git a/src/components/ViewportShadingSelect.tsx b/src/components/ViewportShadingSelect.tsx
@@ -1,6 +1,9 @@
 import React, { VFC } from 'react';
+import { GiIceCube } from '@react-icons/all-files/gi/GiIceCube';
+import { BiCube } from '@react-icons/all-files/bi/BiCube';
+import { FaCube } from '@react-icons/all-files/fa/FaCube';
+import { GiCube } from '@react-icons/all-files/gi/GiCube';
 import { ViewportShading } from '../store';
-import { FaCube, GiCube, GiIceCube, BiCube } from 'react-icons/all';
 import { CompactModeSelect } from './elements';
 import ViewportShadingSettings from './ViewportShadingSettings';
 

diff --git a/src/components/elements/CompactModeSelect.tsx b/src/components/elements/CompactModeSelect.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode, VFC } from 'react';
-import { IconType } from 'react-icons';
 import { Group, Button } from 'reakit';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { IconType } from '@react-icons/all-files';
 import {
   Tooltip,
   TooltipReference,
@@ -9,7 +10,6 @@ import {
   PopoverDisclosure,
   Popover,
 } from '.';
-import { FiChevronDown } from 'react-icons/all';
 
 interface OptionButtonProps<Option> {
   value: Option;

diff --git a/src/components/elements/IconButton.tsx b/src/components/elements/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, ReactElement } from 'react';
 import { Button, ButtonProps } from 'reakit';
-import { IconType } from 'react-icons';
+import { IconType } from '@react-icons/all-files';
 import { Tooltip, TooltipReference, useTooltipState } from './index';
 
 export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {

diff --git a/src/components/elements/SettingsButton.tsx b/src/components/elements/SettingsButton.tsx
@@ -1,4 +1,6 @@
 import React, { ReactElement, ReactNode, VFC } from 'react';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { IconType } from '@react-icons/all-files';
 import {
   Popover,
   PopoverDisclosure,
@@ -7,8 +9,6 @@ import {
   usePopoverState,
   useTooltipState,
 } from './index';
-import { FiChevronDown } from 'react-icons/all';
-import { IconType } from 'react-icons';
 
 export interface SettingsButtonProps {
   icon: ReactElement<IconType>;

diff --git a/stories/CompactModeSelect.stories.tsx b/stories/CompactModeSelect.stories.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import { BiAbacus } from '@react-icons/all-files/bi/BiAbacus';
+import { BiBullseye } from '@react-icons/all-files/bi/BiBullseye';
+import { BiCube } from '@react-icons/all-files/bi/BiCube';
 import { CompactModeSelect } from '../src/components/elements';
-import { BiAbacus, BiBullseye, BiCube } from 'react-icons/all';
 
 const meta: Meta = {
   title: 'CompactModeSelect',

diff --git a/stories/IconButton.stories.tsx b/stories/IconButton.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import { Gi3DHammer } from '@react-icons/all-files/gi/Gi3DHammer';
 import { IconButton } from '../src/components/elements';
-import { Gi3DHammer } from 'react-icons/all';
 
 const meta: Meta = {
   title: 'IconButton',

diff --git a/stories/SetingsButton.stories.tsx b/stories/SetingsButton.stories.tsx
@@ -1,13 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import { AiFillEye } from '@react-icons/all-files/ai/AiFillEye';
 import { SettingsButton } from '../src/components/elements';
-import {
-  AiFillEye,
-  AiFillSetting,
-  AiTwotoneSetting,
-  FaEye,
-  Gi3DHammer,
-} from 'react-icons/all';
 
 const meta: Meta = {
   title: 'SettingsButton',

diff --git a/yarn.lock b/yarn.lock
@@ -1805,6 +1805,11 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@react-icons/all-files@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@react-icons/all-files/-/all-files-4.1.0.tgz#477284873a0821928224b6fc84c62d2534d6650b"
+  integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
+
 "@react-spring/animated@9.0.0-rc.3":
   version "9.0.0-rc.3"
   resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5"
@@ -11825,13 +11830,6 @@ react-hotkeys@2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
-react-icons@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
-  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
-  dependencies:
-    camelcase "^5.0.0"
-
 react-inspector@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.0.tgz#45a325e15f33e595be5356ca2d3ceffb7d6b8c3a"