Add noya-icons package

.eslintrc.js

@@ -7,6 +7,12 @@ module.exports = {
     'no-restricted-imports': [
       'error',
       {
+        paths: [
+          {
+            name: '@radix-ui/react-icons',
+            message: 'Please use "noya-utils" instead.',
+          },
+        ],
         patterns: ['*src*'],
       },
     ],

packages/app/package.json

@@ -7,7 +7,6 @@
     "@dnd-kit/modifiers": "^3.0.0",
     "@dnd-kit/sortable": "^4.0.0",
     "@radix-ui/react-aspect-ratio": "^0.0.14",
-    "@radix-ui/react-icons": "^1.0.1",
     "browser-fs-access": "^0.17.2",
     "kiwi.js": "^1.1.2",
     "react-use-gesture": "^9.1.3",

packages/app/src/components/inspector/BorderRow.tsx

@@ -2,9 +2,9 @@ import Sketch from 'noya-file-format';
 import { Label, LabeledElementView, RadioGroup } from 'noya-designsystem';
 import { SetNumberMode } from 'noya-state';
 import { memo, ReactNode, useCallback } from 'react';
-import BorderCenterIcon from '../icons/BorderCenterIcon';
-import BorderInsideIcon from '../icons/BorderInsideIcon';
-import BorderOutsideIcon from '../icons/BorderOutsideIcon';
+import { BorderCenterIcon } from 'noya-icons';
+import { BorderInsideIcon } from 'noya-icons';
+import { BorderOutsideIcon } from 'noya-icons';
 import * as InspectorPrimitives from '../inspector/InspectorPrimitives';
 import DimensionInput from './DimensionInput';
 import { DimensionValue } from './DimensionsInspector';

packages/app/src/components/inspector/FlipControls.tsx

@@ -1,8 +1,8 @@
 import { Button, Spacer } from 'noya-designsystem';
 import { useCallback } from 'react';
 import styled, { useTheme } from 'styled-components';
-import FlipHorizontalIcon from '../icons/FlipHorizontalIcon';
-import FlipVerticalIcon from '../icons/FlipVerticalIcon';
+import { FlipHorizontalIcon } from 'noya-icons';
+import { FlipVerticalIcon } from 'noya-icons';
 
 export type DimensionValue = number | undefined;
 

packages/app/src/components/inspector/LinkedSymbolRow.tsx

@@ -1,4 +1,4 @@
-import { ComponentInstanceIcon, LinkBreak2Icon } from '@radix-ui/react-icons';
+import { ComponentInstanceIcon, LinkBreak2Icon } from 'noya-icons';
 import { useSelector } from 'noya-app-state-context';
 import { Button, Select } from 'noya-designsystem';
 import { Selectors } from 'noya-state';

packages/app/src/components/inspector/PickerAssetGrid.tsx

@@ -1,4 +1,4 @@
-import { GridIcon, RowsIcon } from '@radix-ui/react-icons';
+import { GridIcon, RowsIcon } from 'noya-icons';
 import { RadioGroup } from 'noya-designsystem';
 import styled from 'styled-components';
 import { memo, useCallback } from 'react';

packages/app/src/components/inspector/SymbolInstanceOverridesRow.tsx

@@ -1,4 +1,4 @@
-import { ResetIcon } from '@radix-ui/react-icons';
+import { ResetIcon } from 'noya-icons';
 import Sketch from 'noya-file-format';
 import {
   InputField,

packages/app/src/components/inspector/SymbolLayoutRow.tsx

@@ -5,7 +5,7 @@ import {
   PinTopIcon,
   SpaceEvenlyHorizontallyIcon,
   SpaceEvenlyVerticallyIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import Sketch from 'noya-file-format';
 import {
   Divider,

packages/app/src/components/inspector/TextLayoutRow.tsx

@@ -10,7 +10,7 @@ import {
   PinBottomIcon,
   PinTopIcon,
   AlignCenterVerticallyIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import { Label, RadioGroup, LabeledElementView } from 'noya-designsystem';
 import { Spacer } from 'noya-designsystem';
 import { memo } from 'react';

packages/app/src/components/inspector/TextOptionsRow.tsx

@@ -2,7 +2,7 @@ import {
   LetterCaseCapitalizeIcon,
   LetterCaseLowercaseIcon,
   LetterCaseUppercaseIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import Sketch from 'noya-file-format';
 import {
   Label,

packages/app/src/containers/LayerList.tsx

@@ -11,7 +11,7 @@ import {
   Share1Icon,
   SquareIcon,
   TextIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import {
   useApplicationState,
   useGetStateSnapshot,
@@ -45,7 +45,7 @@ import React, {
 } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { visit } from 'tree-visit';
-import LineIcon from '../components/icons/LineIcon';
+import { LineIcon } from 'noya-icons';
 import useLayerMenu, { LayerMenuItemType } from '../hooks/useLayerMenu';
 
 const IconContainer = styled.span(({ theme }) => ({

packages/app/src/containers/LinkedStyleInspector.tsx

@@ -4,7 +4,7 @@ import {
   PlusIcon,
   ResetIcon,
   UpdateIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import Sketch from 'noya-file-format';
 import { useDispatch, useSelector } from 'noya-app-state-context';
 import { Button, Select } from 'noya-designsystem';

packages/app/src/containers/LinkedTextStyleInspector.tsx

@@ -4,7 +4,7 @@ import {
   PlusIcon,
   ResetIcon,
   UpdateIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import { useApplicationState, useSelector } from 'noya-app-state-context';
 import { Button, Select } from 'noya-designsystem';
 import { Selectors } from 'noya-state';

packages/app/src/containers/Menubar.tsx

@@ -1,4 +1,4 @@
-import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { HamburgerMenuIcon } from 'noya-icons';
 import { FileSystemHandle } from 'browser-fs-access';
 import {
   useDispatch,

packages/app/src/containers/PageList.tsx

@@ -1,4 +1,4 @@
-import { FileIcon, StackIcon, TokensIcon } from '@radix-ui/react-icons';
+import { FileIcon, StackIcon, TokensIcon } from 'noya-icons';
 import {
   useApplicationState,
   useDispatch,

packages/app/src/containers/ThemeGroups.tsx

@@ -1,4 +1,4 @@
-import { GroupIcon } from '@radix-ui/react-icons';
+import { GroupIcon } from 'noya-icons';
 import Sketch from 'noya-file-format';
 import { useApplicationState, useSelector } from 'noya-app-state-context';
 import { TreeView } from 'noya-designsystem';

packages/app/src/containers/ThemeToolbar.tsx

@@ -6,7 +6,7 @@ import {
   MarginIcon,
   PlusIcon,
   TrashIcon,
-} from '@radix-ui/react-icons';
+} from 'noya-icons';
 import React, { useMemo, useCallback } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { useApplicationState, useSelector } from 'noya-app-state-context';

packages/app/src/containers/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { ChevronDownIcon } from 'noya-icons';
 import { FileSystemHandle } from 'browser-fs-access';
 import {
   useApplicationState,
@@ -25,7 +25,7 @@ import {
 import { round } from 'noya-utils';
 import { memo, useCallback, useMemo } from 'react';
 import styled, { useTheme } from 'styled-components';
-import PointModeIcon from '../components/icons/PointModeIcon';
+import { PointModeIcon } from 'noya-icons';
 import { LayerIcon } from './LayerList';
 
 type InteractionStateProjection =

packages/app/src/containers/Workspace.tsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { MagnifyingGlassIcon } from 'noya-icons';
 import produce from 'immer';
 import { useSelector } from 'noya-app-state-context';
 import {

packages/noya-designsystem/src/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import * as RadixContextMenu from '@radix-ui/react-context-menu';
-import { CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { CheckIcon, ChevronRightIcon } from 'noya-icons';
 import { Slot } from '@radix-ui/react-slot';
 import { useKeyboardShortcuts } from 'noya-keymap';
 import React, {

packages/noya-designsystem/src/components/DropdownMenu.tsx

@@ -1,5 +1,5 @@
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { CheckIcon, ChevronRightIcon } from 'noya-icons';
 import { Slot } from '@radix-ui/react-slot';
 import { useKeyboardShortcuts } from 'noya-keymap';
 import { memo, useCallback, useMemo } from 'react';

packages/noya-designsystem/src/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import * as Icons from '@radix-ui/react-icons';
+import * as Icons from 'noya-icons';
 import { ForwardedRef, forwardRef, memo } from 'react';
 import { useTheme } from 'styled-components';
 import Button, { ButtonRootProps } from './Button';

packages/noya-designsystem/src/components/InputField.tsx

@@ -1,4 +1,4 @@
-import { CaretDownIcon } from '@radix-ui/react-icons';
+import { CaretDownIcon } from 'noya-icons';
 import { Property } from 'csstype';
 import { DropdownMenu as NoyaDropdownMenu, MenuItem } from 'noya-designsystem';
 import { memoize } from 'noya-utils';

packages/noya-icons/README.md

@@ -0,0 +1,6 @@
+# Noya Icons
+
+This package contains the icons used in the Noya app.
+
+Most of the icons come directly from [Radix Icons](https://icons.modulz.app/),
+but we've added a few of our own.

packages/noya-icons/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "noya-icons",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.0.3"
+  }
+}

packages/app/src/components/icons/BorderCenterIcon.tsx → packages/noya-icons/src/icons/BorderCenterIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const BorderCenterIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const BorderCenterIcon = memo(function ({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -20,6 +24,4 @@ const BorderCenterIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       />
     </svg>
   );
-};
-
-export default BorderCenterIcon;
+});

packages/app/src/components/icons/BorderInsideIcon.tsx → packages/noya-icons/src/icons/BorderInsideIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const BorderInsideIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const BorderInsideIcon = memo(function BorderInsideIcon({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -17,6 +21,4 @@ const BorderInsideIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       <rect x="3.5" y="3.5" width="8" height="8" stroke={color} />
     </svg>
   );
-};
-
-export default BorderInsideIcon;
+});

packages/app/src/components/icons/BorderOutsideIcon.tsx → packages/noya-icons/src/icons/BorderOutsideIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const BorderOutsideIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const BorderOutsideIcon = memo(function BorderOutsideIcon({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -29,6 +33,4 @@ const BorderOutsideIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       <rect x="1.5" y="1.5" width="12" height="12" rx="1" stroke={color} />
     </svg>
   );
-};
-
-export default BorderOutsideIcon;
+});

packages/app/src/components/icons/FlipHorizontalIcon.tsx → packages/noya-icons/src/icons/FlipHorizontalIcon.tsx

@@ -1,9 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const FlipHorizontalIcon = ({
+export const FlipHorizontalIcon = memo(function FlipHorizontalIcon({
   color = 'currentColor',
   ...props
-}: IconProps) => {
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -24,6 +25,4 @@ const FlipHorizontalIcon = ({
       />
     </svg>
   );
-};
-
-export default FlipHorizontalIcon;
+});

packages/app/src/components/icons/FlipVerticalIcon.tsx → packages/noya-icons/src/icons/FlipVerticalIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const FlipVerticalIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const FlipVerticalIcon = memo(function FlipVerticalIcon({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -21,6 +25,4 @@ const FlipVerticalIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       />
     </svg>
   );
-};
-
-export default FlipVerticalIcon;
+});

packages/app/src/components/icons/LineIcon.tsx → packages/noya-icons/src/icons/LineIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const LineIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const LineIcon = memo(function LineIcon({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -22,6 +26,4 @@ const LineIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       />
     </svg>
   );
-};
-
-export default LineIcon;
+});

packages/app/src/components/icons/PointModeIcon.tsx → packages/noya-icons/src/icons/PointModeIcon.tsx

@@ -1,6 +1,10 @@
 import { IconProps } from '@radix-ui/react-icons/dist/types';
+import { memo } from 'react';
 
-const PointModeIcon = ({ color = 'currentColor', ...props }: IconProps) => {
+export const PointModeIcon = memo(function PointModeIcon({
+  color = 'currentColor',
+  ...props
+}: IconProps) {
   return (
     <svg
       width="15"
@@ -23,6 +27,4 @@ const PointModeIcon = ({ color = 'currentColor', ...props }: IconProps) => {
       />
     </svg>
   );
-};
-
-export default PointModeIcon;
+});

packages/noya-icons/src/index.ts

@@ -0,0 +1,13 @@
+export * from './icons/BorderCenterIcon';
+export * from './icons/BorderInsideIcon';
+export * from './icons/BorderOutsideIcon';
+export * from './icons/FlipHorizontalIcon';
+export * from './icons/FlipVerticalIcon';
+export * from './icons/LineIcon';
+export * from './icons/PointModeIcon';
+
+// All icons should be imported from 'noya-icons'. We don't allow
+// importing radix-ui icons directly outside of this package.
+//
+// eslint-disable-next-line no-restricted-imports
+export * from '@radix-ui/react-icons';

yarn.lock

@@ -2552,7 +2552,7 @@
     "@radix-ui/react-primitive" "0.0.15"
     "@radix-ui/react-use-callback-ref" "0.0.5"
 
-"@radix-ui/react-icons@^1.0.1":
+"@radix-ui/react-icons@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.0.3.tgz#4ef61f1234f44991f7a19e108f77ca37032b4be2"
   integrity sha512-YbPAUZwTsvF/2H7IU35txaLUB+JNSV8GIhnswlqiFODP/P32t5op5keYUvQWsSj9TA0VLF367J24buUjIprn0w==