replaced 'iconoir-react' with '@tokens-studio/icons' where possible

packages/graph-editor/package.json

@@ -54,6 +54,7 @@
     "@rematch/core": "2.2.0",
     "@stitches/react": "1.2.8",
     "@tokens-studio/graph-engine": "*",
+    "@tokens-studio/icons": "^0.1.3",
     "@tokens-studio/tokens": "^0.0.24",
     "@tokens-studio/types": "^0.2.3",
     "@tokens-studio/ui": "^0.6.9",

packages/graph-editor/src/components/colorPicker/InputPopover.tsx

@@ -1,7 +1,7 @@
 import * as Popover from '@radix-ui/react-popover';
-import { Xmark } from 'iconoir-react';
 import { keyframes, styled } from '@/lib/stitches/index.js';
 import React from 'react';
+import Xmark from '@tokens-studio/icons/Xmark.js';
 
 interface IInputPopover {
   children: React.ReactNode;

packages/graph-editor/src/components/commandPalette/index.tsx

@@ -8,14 +8,14 @@ import {
 import { Node } from '@tokens-studio/graph-engine';
 import { NodeRequest } from '@/editor/actions/createNode.js';
 import { Node as ReactFlowNode, useReactFlow } from 'reactflow';
-import { Search } from 'iconoir-react';
 import { isActiveElementTextEditable } from '@/utils/isActiveElementTextEditable.js';
 import { observer } from 'mobx-react-lite';
 import { showNodesCmdPaletteSelector } from '@/redux/selectors/ui.js';
 import { styled } from '@/lib/stitches/index.js';
 import { useDispatch, useSelector } from 'react-redux';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
 import React from 'react';
+import Search from '@tokens-studio/icons/Search.js';
 
 export interface ICommandMenu {
   items: DropPanelStore;

packages/graph-editor/src/components/controls/array.tsx

@@ -19,13 +19,15 @@ import {
   TextInput,
 } from '@tokens-studio/ui';
 import { ColorPickerPopover } from '../colorPicker/index.js';
-import { FloppyDisk, Minus, Plus } from 'iconoir-react';
 import { IField } from './interface.js';
 import { JSONTree } from 'react-json-tree';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { toJS } from 'mobx';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
+import Minus from '@tokens-studio/icons/Minus.js';
+import Plus from '@tokens-studio/icons/Plus.js';
 import React, { useCallback } from 'react';
 
 const inputItemTypes = [STRING, NUMBER, COLOR];

packages/graph-editor/src/components/controls/color.tsx

@@ -1,11 +1,11 @@
 import { Box, IconButton, Stack, Text } from '@tokens-studio/ui';
 import { ColorPickerPopover } from '../colorPicker/index.js';
-import { FloppyDisk } from 'iconoir-react';
 import { IField } from './interface.js';
 import { Input, hexToColor, toColor, toHex } from '@tokens-studio/graph-engine';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 
 export const ColorField = observer(({ port, readOnly }: IField) => {

packages/graph-editor/src/components/controls/numeric.tsx

@@ -1,10 +1,10 @@
-import { FloppyDisk } from 'iconoir-react';
 import { IField } from './interface.js';
 import { IconButton, Stack, TextInput } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 
 export const NumericField = observer(({ port, readOnly }: IField) => {

packages/graph-editor/src/components/controls/slider.tsx

@@ -1,11 +1,11 @@
-import { FloppyDisk } from 'iconoir-react';
 import { IField } from './interface.js';
 import { IconButton, Stack, Text } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
 import { Slider } from '../slider/index.js';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 
 export const SliderField = observer(({ port, readOnly }: IField) => {

packages/graph-editor/src/components/controls/string.tsx

@@ -1,10 +1,10 @@
-import { FloppyDisk } from 'iconoir-react';
 import { IField } from './interface.js';
 import { IconButton, Stack, Text, TextInput } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useEffect } from 'react';
 
 export const Textfield = observer(({ port, readOnly }: IField) => {

packages/graph-editor/src/components/controls/text.tsx

@@ -1,10 +1,10 @@
-import { FloppyDisk } from 'iconoir-react';
 import { IField } from './interface.js';
 import { IconButton, Textarea as UITextarea } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
 import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useEffect } from 'react';
 
 export const TextArea = observer(({ port, readOnly }: IField) => {

packages/graph-editor/src/components/debugger/player.tsx

@@ -1,8 +1,13 @@
 import { DebugInfo } from './data.js';
 import { IconButton, Select, Stack, Text } from '@tokens-studio/ui';
-import { Pause, Play, Trash, UndoAction, ZoomIn, ZoomOut } from 'iconoir-react';
 import { TimelineState } from '@xzdarcy/react-timeline-editor';
+import Pause from '@tokens-studio/icons/Pause.js';
+import Play from '@tokens-studio/icons/Play.js';
 import React, { useEffect, useState } from 'react';
+import Trash from '@tokens-studio/icons/Trash.js';
+import UndoAction from '@tokens-studio/icons/UndoAction.js';
+import ZoomIn from '@tokens-studio/icons/ZoomIn.js';
+import ZoomOut from '@tokens-studio/icons/ZoomOut.js';
 
 export const scaleWidth = 160;
 export const scale = 5;

packages/graph-editor/src/components/dialogs/findDialog.tsx

@@ -1,5 +1,4 @@
 import { Button, Dialog, IconButton, Text, TextInput } from '@tokens-studio/ui';
-import { Xmark } from 'iconoir-react';
 import { title as annotatedTitle } from '@/annotations/index.js';
 import {
   graphEditorSelector,
@@ -8,6 +7,7 @@ import {
 import { useDispatch, useGraph } from '@/hooks/index.js';
 import { useSelector } from 'react-redux';
 import React from 'react';
+import Xmark from '@tokens-studio/icons/Xmark.js';
 
 export const FindDialog = () => {
   const [id, setId] = React.useState('');

packages/graph-editor/src/components/flow/nodes/noteNode.tsx

@@ -1,11 +1,11 @@
 import { BaseNodeWrapper } from '../wrapper/base.js';
 import { Box, IconButton, Textarea } from '@tokens-studio/ui';
-import { EditPencil } from 'iconoir-react';
 import { Node } from '@tokens-studio/graph-engine';
 import { NodeProps, NodeResizer } from 'reactflow';
 import { description, title } from '@/annotations/index.js';
 import { observer } from 'mobx-react-lite';
 import { useLocalGraph } from '@/context/graph.js';
+import EditPencil from '@tokens-studio/icons/EditPencil.js';
 import Markdown from 'react-markdown';
 import React from 'react';
 

packages/graph-editor/src/components/flow/wrapper/base.tsx

@@ -1,5 +1,4 @@
 import { Box, Spinner, Stack, Text } from '@tokens-studio/ui';
-import { IconoirProvider } from 'iconoir-react';
 import { styled } from '@stitches/react';
 import React, { useMemo } from 'react';
 
@@ -91,11 +90,9 @@ export const BaseNodeWrapper = (props: NodeProps) => {
             >
               <Stack direction="row" gap={2} align="center">
                 {icon && (
-                  <IconoirProvider
-                    iconProps={{ width: '0.875em', height: '0.875em' }}
-                  >
+                  <div style={{ width: '0.875em', height: '0.875em' }}>
                     {icon}
-                  </IconoirProvider>
+                  </div>
                 )}
                 <Stack direction="column">
                   <Text

packages/graph-editor/src/components/menubar/defaults.tsx

@@ -1,13 +1,4 @@
 import { AlignmentPanel } from '../panels/alignment/index.js';
-import {
-  Archive,
-  Cpu,
-  Download,
-  PagePlusIn,
-  Play,
-  Settings as SettingsIcon,
-  Upload,
-} from 'iconoir-react';
 import { DebugPanel } from '../panels/debugger/index.js';
 import { DropPanel } from '../panels/dropPanel/index.js';
 import { GraphPanel } from '../panels/graph/index.js';
@@ -30,7 +21,14 @@ import {
 import { title } from '@/annotations/index.js';
 import { useDispatch } from '@/hooks/index.js';
 import { useSelector } from 'react-redux';
+import Archive from '@tokens-studio/icons/Archive.js';
+import Cpu from '@tokens-studio/icons/Cpu.js';
+import Download from '@tokens-studio/icons/Download.js';
+import PagePlusIn from '@tokens-studio/icons/PagePlusIn.js';
+import Play from '@tokens-studio/icons/Play.js';
 import React, { MutableRefObject, useCallback } from 'react';
+import SettingsIcon from '@tokens-studio/icons/Settings.js';
+import Upload from '@tokens-studio/icons/Upload.js';
 import type { DockLayout } from 'rc-dock';
 
 export interface IWindowButton {

packages/graph-editor/src/components/panels/alignment/index.tsx

@@ -1,23 +1,21 @@
-import {
-  AlignHorizontalCenters,
-  AlignVerticalCenters,
-  CompAlignBottom,
-  CompAlignBottomSolid,
-  CompAlignLeft,
-  CompAlignRight,
-  CompAlignTop,
-  CompAlignTopSolid,
-} from 'iconoir-react';
 import {
   AlignHorizontalCentersSolid,
   AlignVerticalCentersSolid,
+  CompAlignBottomSolid,
   CompAlignLeftSolid,
   CompAlignRightSolid,
+  CompAlignTopSolid,
 } from 'iconoir-react';
 import { Box, IconButton, Stack, Text } from '@tokens-studio/ui';
 import { Node } from 'reactflow';
 import { graphEditorSelector } from '@/redux/selectors/index.js';
 import { useSelector } from 'react-redux';
+import AlignHorizontalCenters from '@tokens-studio/icons/AlignHorizontalCenters.js';
+import AlignVerticalCenters from '@tokens-studio/icons/AlignVerticalCenters.js';
+import CompAlignBottom from '@tokens-studio/icons/CompAlignBottom.js';
+import CompAlignLeft from '@tokens-studio/icons/CompAlignLeft.js';
+import CompAlignRight from '@tokens-studio/icons/CompAlignRight.js';
+import CompAlignTop from '@tokens-studio/icons/CompAlignTop.js';
 import React from 'react';
 
 const partitionSelectedNodes = (nodes: Node[]) => {

packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx

@@ -1,12 +1,12 @@
 import { Accordion, Box, Stack, Text, TextInput } from '@tokens-studio/ui';
 import { DragItem } from './DragItem.js';
 import { DropPanelStore } from './data.js';
-import { IconoirProvider, NavArrowRight } from 'iconoir-react';
 import { NodeEntry } from './NodeEntry.js';
 import { observer } from 'mobx-react-lite';
 import { panelItemsSelector } from '@/redux/selectors/registry.js';
 import { styled } from '@/lib/stitches/index.js';
 import { useSelector } from 'react-redux';
+import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import React, { useState } from 'react';
 
 const StyledAccordionTrigger = styled(Accordion.Trigger, {
@@ -138,8 +138,12 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
                     width="full"
                     css={{ padding: '$3 0' }}
                   >
-                    <IconoirProvider
-                      iconProps={{ width: '0.875em', height: '0.875em' }}
+                    <div
+                      style={{
+                        display: 'flex',
+                        width: '0.875em',
+                        height: '0.875em',
+                      }}
                     >
                       <Stack gap={3} align="center">
                         {value.icon}
@@ -157,7 +161,7 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
                       >
                         <StyledChevron />
                       </Box>
-                    </IconoirProvider>
+                    </div>
                   </Stack>
                 </StyledAccordionTrigger>
                 <Accordion.Content>

packages/graph-editor/src/components/panels/graph/index.tsx

@@ -1,11 +1,11 @@
 import { Box, IconButton, Label, Stack, TextInput } from '@tokens-studio/ui';
 import React, { useState } from 'react';
 
-import { FloppyDisk } from 'iconoir-react';
 import { JSONTree } from 'react-json-tree';
 import { description, title } from '@/annotations/index.js';
 import { observer } from 'mobx-react-lite';
 import { useGraph } from '@/hooks/useGraph.js';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 
 export function GraphPanel() {
   const graph = useGraph();

packages/graph-editor/src/components/panels/inputs/index.tsx

@@ -2,14 +2,14 @@ import { Box, Heading, IconButton, Stack } from '@tokens-studio/ui';
 import React, { useMemo } from 'react';
 
 import { DynamicInputs } from './dynamicInputs.js';
-import { InfoCircle } from 'iconoir-react';
 import { PortPanel } from '@/components/portPanel/index.js';
 import { annotatedDynamicInputs } from '@tokens-studio/graph-engine';
 import { currentNode } from '@/redux/selectors/graph.js';
 import { editable } from '@/annotations/index.js';
 import { inputControls } from '@/redux/selectors/registry.js';
 import { useGraph } from '@/hooks/useGraph.js';
 import { useSelector } from 'react-redux';
+import InfoCircle from '@tokens-studio/icons/InfoCircle.js';
 
 export function Inputsheet() {
   const graph = useGraph();

packages/graph-editor/src/components/panels/logs/index.tsx

@@ -2,10 +2,10 @@ import { Box, IconButton, Stack, Text, TextInput } from '@tokens-studio/ui';
 import React, { useCallback, useEffect, useRef } from 'react';
 
 import { JSONTree } from 'react-json-tree';
-import { Trash } from 'iconoir-react';
 import { logSelector } from '@/redux/selectors/graph.js';
 import { useDispatch } from '@/hooks/index.js';
 import { useSelector } from 'react-redux';
+import Trash from '@tokens-studio/icons/Trash.js';
 
 export function LogsPanel() {
   const logs = useSelector(logSelector);

packages/graph-editor/src/components/portPanel/index.tsx

@@ -11,20 +11,18 @@ import { observer } from 'mobx-react-lite';
 import { useSelector } from 'react-redux';
 import React, { useCallback, useMemo } from 'react';
 
-import {
-  Download,
-  EyeClosed,
-  EyeSolid,
-  MoreVert,
-  Puzzle,
-  Undo,
-  Xmark,
-} from 'iconoir-react';
+import { EyeSolid } from 'iconoir-react';
 import { IField } from '@/components/controls/interface.js';
 import { InlineTypeLabel } from '@/components/flow/index.js';
 import { controls } from '@/redux/selectors/registry.js';
 import { deletable, hidden, resetable } from '@/annotations/index.js';
 import { useGraph } from '@/hooks/useGraph.js';
+import Download from '@tokens-studio/icons/Download.js';
+import EyeClosed from '@tokens-studio/icons/EyeClosed.js';
+import MoreVert from '@tokens-studio/icons/MoreVert.js';
+import Puzzle from '@tokens-studio/icons/Puzzle.js';
+import Undo from '@tokens-studio/icons/Undo.js';
+import Xmark from '@tokens-studio/icons/Xmark.js';
 import copy from 'copy-to-clipboard';
 
 export interface IPortPanel {

packages/graph-editor/src/components/toolbar/buttons/download.tsx

@@ -1,8 +1,8 @@
-import { Download } from 'iconoir-react';
 import { IconButton, Tooltip } from '@tokens-studio/ui';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
 import { mainGraphSelector } from '@/redux/selectors/graph.js';
 import { useSelector } from 'react-redux';
+import Download from '@tokens-studio/icons/Download.js';
 import React from 'react';
 export const DownloadToolbarButton = () => {
   const mainGraph = useSelector(mainGraphSelector);

packages/graph-editor/src/components/toolbar/buttons/settings.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Tooltip } from '@tokens-studio/ui';
-import { Settings } from 'iconoir-react';
 import { useLayoutButton } from '../../../hooks/useLayoutButton.js';
 import React from 'react';
+import Settings from '@tokens-studio/icons/Settings.js';
 
 export const SettingsToolbarButton = () => {
   const onClick = useLayoutButton();

packages/graph-editor/src/components/toolbar/buttons/upload.tsx

@@ -1,9 +1,9 @@
 import { IconButton, Tooltip } from '@tokens-studio/ui';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
-import { Upload } from 'iconoir-react';
 import { mainGraphSelector } from '@/redux/selectors/graph.js';
 import { useSelector } from 'react-redux';
 import React from 'react';
+import Upload from '@tokens-studio/icons/Upload.js';
 
 export const UploadToolbarButton = () => {
   const mainGraph = useSelector(mainGraphSelector);

packages/graph-editor/src/components/toolbar/dropdowns/add.tsx

@@ -1,11 +1,12 @@
 import { Button, DropdownMenu, Stack, Tooltip } from '@tokens-studio/ui';
-import { NavArrowRight, Plus } from 'iconoir-react';
 import { panelItemsSelector } from '@/redux/selectors/index.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useDispatch } from '@/hooks/index.js';
 import { useReactFlow } from 'reactflow';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
 import { useSelector } from 'react-redux';
+import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
+import Plus from '@tokens-studio/icons/Plus.js';
 import React, { useCallback } from 'react';
 
 const scrollbarStyle = {