S2 Icon Builder CLI (adobe#6806)

alecmev · Aug 15, 2024 · 2bca133 · 2bca133
1 parent 16176b8
commit 2bca133
Show file tree

Hide file tree

Showing 110 changed files with 496 additions and 326 deletions.
diff --git a/.parcelrc-build b/.parcelrc-build
@@ -6,7 +6,8 @@
     "style-types:*.ts": ["@parcel/transformer-typescript-types"],
     "packages/**/intl/*.json": ["parcel-transformer-intl"],
     "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
-    "packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["parcel-transformer-icon"],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
     "*.svg": ["@parcel/transformer-svg-react"],
@@ -15,5 +16,5 @@
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-icon", "parcel-namer-intl", "..."]
+  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."]
 }
diff --git a/.storybook-s2/.parcelrc b/.storybook-s2/.parcelrc
@@ -3,7 +3,8 @@
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
   "transformers": {
     "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
-    "packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["parcel-transformer-icon"],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "*.css": ["@parcel/transformer-css"],

diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "@parcel/transformer-inline-string": "2.0.0-dev.1601",
     "@parcel/transformer-svg-react": "2.12.1-dev.3224",
     "@parcel/transformer-typescript-types": "2.0.0-dev.1601",
+    "@react-spectrum/s2-icon-builder": "^1.0.0",
     "@spectrum-css/component-builder": "1.0.1",
     "@spectrum-css/vars": "^2.3.0",
     "@storybook/addon-a11y": "^7.6.19",

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import AlertNotice_L from './S2_lin_alertNotice_160.svg';
-import AlertNotice_M from './S2_lin_alertNotice_96.svg';
-import AlertNotice_S from './S2_lin_alertNotice_48.svg';
+import AlertNotice_L from 'illustration:./S2_lin_alertNotice_160.svg';
+import AlertNotice_M from 'illustration:./S2_lin_alertNotice_96.svg';
+import AlertNotice_S from 'illustration:./S2_lin_alertNotice_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Apps_L from './S2_lin_apps_160.svg';
-import Apps_M from './S2_lin_apps_96.svg';
-import Apps_S from './S2_lin_apps_48.svg';
+import Apps_L from 'illustration:./S2_lin_apps_160.svg';
+import Apps_M from 'illustration:./S2_lin_apps_96.svg';
+import Apps_S from 'illustration:./S2_lin_apps_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import ArrowDown_L from './S2_lin_arrowDown_160.svg';
-import ArrowDown_M from './S2_lin_arrowDown_96.svg';
-import ArrowDown_S from './S2_lin_arrowDown_48.svg';
+import ArrowDown_L from 'illustration:./S2_lin_arrowDown_160.svg';
+import ArrowDown_M from 'illustration:./S2_lin_arrowDown_96.svg';
+import ArrowDown_S from 'illustration:./S2_lin_arrowDown_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import ArrowLeft_L from './S2_lin_arrowLeft_160.svg';
-import ArrowLeft_M from './S2_lin_arrowLeft_96.svg';
-import ArrowLeft_S from './S2_lin_arrowLeft_48.svg';
+import ArrowLeft_L from 'illustration:./S2_lin_arrowLeft_160.svg';
+import ArrowLeft_M from 'illustration:./S2_lin_arrowLeft_96.svg';
+import ArrowLeft_S from 'illustration:./S2_lin_arrowLeft_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import ArrowRight_L from './S2_lin_arrowRight_160.svg';
-import ArrowRight_M from './S2_lin_arrowRight_96.svg';
-import ArrowRight_S from './S2_lin_arrowRight_48.svg';
+import ArrowRight_L from 'illustration:./S2_lin_arrowRight_160.svg';
+import ArrowRight_M from 'illustration:./S2_lin_arrowRight_96.svg';
+import ArrowRight_S from 'illustration:./S2_lin_arrowRight_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import ArrowUp_L from './S2_lin_arrowUp_160.svg';
-import ArrowUp_M from './S2_lin_arrowUp_96.svg';
-import ArrowUp_S from './S2_lin_arrowUp_48.svg';
+import ArrowUp_L from 'illustration:./S2_lin_arrowUp_160.svg';
+import ArrowUp_M from 'illustration:./S2_lin_arrowUp_96.svg';
+import ArrowUp_S from 'illustration:./S2_lin_arrowUp_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Artboard_L from './S2_lin_artboard_160.svg';
-import Artboard_M from './S2_lin_artboard_96.svg';
-import Artboard_S from './S2_lin_artboard_48.svg';
+import Artboard_L from 'illustration:./S2_lin_artboard_160.svg';
+import Artboard_M from 'illustration:./S2_lin_artboard_96.svg';
+import Artboard_S from 'illustration:./S2_lin_artboard_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Bell_L from './S2_lin_bell_160.svg';
-import Bell_M from './S2_lin_bell_96.svg';
-import Bell_S from './S2_lin_bell_48.svg';
+import Bell_L from 'illustration:./S2_lin_bell_160.svg';
+import Bell_M from 'illustration:./S2_lin_bell_96.svg';
+import Bell_S from 'illustration:./S2_lin_bell_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Bolt_L from './S2_lin_bolt_160.svg';
-import Bolt_M from './S2_lin_bolt_96.svg';
-import Bolt_S from './S2_lin_bolt_48.svg';
+import Bolt_L from 'illustration:./S2_lin_bolt_160.svg';
+import Bolt_M from 'illustration:./S2_lin_bolt_96.svg';
+import Bolt_S from 'illustration:./S2_lin_bolt_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Brand_L from './S2_lin_brand_160.svg';
-import Brand_M from './S2_lin_brand_96.svg';
-import Brand_S from './S2_lin_brand_48.svg';
+import Brand_L from 'illustration:./S2_lin_brand_160.svg';
+import Brand_M from 'illustration:./S2_lin_brand_96.svg';
+import Brand_S from 'illustration:./S2_lin_brand_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Briefcase_L from './S2_lin_briefcase_160.svg';
-import Briefcase_M from './S2_lin_briefcase_96.svg';
-import Briefcase_S from './S2_lin_briefcase_48.svg';
+import Briefcase_L from 'illustration:./S2_lin_briefcase_160.svg';
+import Briefcase_M from 'illustration:./S2_lin_briefcase_96.svg';
+import Briefcase_S from 'illustration:./S2_lin_briefcase_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Browser_L from './S2_lin_browser_160.svg';
-import Browser_M from './S2_lin_browser_96.svg';
-import Browser_S from './S2_lin_browser_48.svg';
+import Browser_L from 'illustration:./S2_lin_browser_160.svg';
+import Browser_M from 'illustration:./S2_lin_browser_96.svg';
+import Browser_S from 'illustration:./S2_lin_browser_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import BrowserError_L from './S2_lin_browserError_160.svg';
-import BrowserError_M from './S2_lin_browserError_96.svg';
-import BrowserError_S from './S2_lin_browserError_48.svg';
+import BrowserError_L from 'illustration:./S2_lin_browserError_160.svg';
+import BrowserError_M from 'illustration:./S2_lin_browserError_96.svg';
+import BrowserError_S from 'illustration:./S2_lin_browserError_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import BrowserNotCompatible_L from './S2_lin_browserNotCompatible_160.svg';
-import BrowserNotCompatible_M from './S2_lin_browserNotCompatible_96.svg';
-import BrowserNotCompatible_S from './S2_lin_browserNotCompatible_48.svg';
+import BrowserNotCompatible_L from 'illustration:./S2_lin_browserNotCompatible_160.svg';
+import BrowserNotCompatible_M from 'illustration:./S2_lin_browserNotCompatible_96.svg';
+import BrowserNotCompatible_S from 'illustration:./S2_lin_browserNotCompatible_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import BuildTable_L from './S2_lin_buildTable_160.svg';
-import BuildTable_M from './S2_lin_buildTable_96.svg';
-import BuildTable_S from './S2_lin_buildTable_48.svg';
+import BuildTable_L from 'illustration:./S2_lin_buildTable_160.svg';
+import BuildTable_M from 'illustration:./S2_lin_buildTable_96.svg';
+import BuildTable_S from 'illustration:./S2_lin_buildTable_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Buildings_L from './S2_lin_buildings_160.svg';
-import Buildings_M from './S2_lin_buildings_96.svg';
-import Buildings_S from './S2_lin_buildings_48.svg';
+import Buildings_L from 'illustration:./S2_lin_buildings_160.svg';
+import Buildings_M from 'illustration:./S2_lin_buildings_96.svg';
+import Buildings_S from 'illustration:./S2_lin_buildings_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Calendar_L from './S2_lin_calendar_160.svg';
-import Calendar_M from './S2_lin_calendar_96.svg';
-import Calendar_S from './S2_lin_calendar_48.svg';
+import Calendar_L from 'illustration:./S2_lin_calendar_160.svg';
+import Calendar_M from 'illustration:./S2_lin_calendar_96.svg';
+import Calendar_S from 'illustration:./S2_lin_calendar_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Camera_L from './S2_lin_camera_160.svg';
-import Camera_M from './S2_lin_camera_96.svg';
-import Camera_S from './S2_lin_camera_48.svg';
+import Camera_L from 'illustration:./S2_lin_camera_160.svg';
+import Camera_M from 'illustration:./S2_lin_camera_96.svg';
+import Camera_S from 'illustration:./S2_lin_camera_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Chatbubble_L from './S2_lin_chatbubble_160.svg';
-import Chatbubble_M from './S2_lin_chatbubble_96.svg';
-import Chatbubble_S from './S2_lin_chatbubble_48.svg';
+import Chatbubble_L from 'illustration:./S2_lin_chatbubble_160.svg';
+import Chatbubble_M from 'illustration:./S2_lin_chatbubble_96.svg';
+import Chatbubble_S from 'illustration:./S2_lin_chatbubble_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Check_L from './S2_lin_check_160.svg';
-import Check_M from './S2_lin_check_96.svg';
-import Check_S from './S2_lin_check_48.svg';
+import Check_L from 'illustration:./S2_lin_check_160.svg';
+import Check_M from 'illustration:./S2_lin_check_96.svg';
+import Check_S from 'illustration:./S2_lin_check_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Clipboard_L from './S2_lin_clipboard_160.svg';
-import Clipboard_M from './S2_lin_clipboard_96.svg';
-import Clipboard_S from './S2_lin_clipboard_48.svg';
+import Clipboard_L from 'illustration:./S2_lin_clipboard_160.svg';
+import Clipboard_M from 'illustration:./S2_lin_clipboard_96.svg';
+import Clipboard_S from 'illustration:./S2_lin_clipboard_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Clock_L from './S2_lin_clock_160.svg';
-import Clock_M from './S2_lin_clock_96.svg';
-import Clock_S from './S2_lin_clock_48.svg';
+import Clock_L from 'illustration:./S2_lin_clock_160.svg';
+import Clock_M from 'illustration:./S2_lin_clock_96.svg';
+import Clock_S from 'illustration:./S2_lin_clock_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Close_L from './S2_lin_close_160.svg';
-import Close_M from './S2_lin_close_96.svg';
-import Close_S from './S2_lin_close_48.svg';
+import Close_L from 'illustration:./S2_lin_close_160.svg';
+import Close_M from 'illustration:./S2_lin_close_96.svg';
+import Close_S from 'illustration:./S2_lin_close_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import Cloud_L from './S2_lin_cloud_160.svg';
-import Cloud_M from './S2_lin_cloud_96.svg';
-import Cloud_S from './S2_lin_cloud_48.svg';
+import Cloud_L from 'illustration:./S2_lin_cloud_160.svg';
+import Cloud_M from 'illustration:./S2_lin_cloud_96.svg';
+import Cloud_S from 'illustration:./S2_lin_cloud_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import CloudStateDisconnected_L from './S2_lin_cloudStateDisconnected_160.svg';
-import CloudStateDisconnected_M from './S2_lin_cloudStateDisconnected_96.svg';
-import CloudStateDisconnected_S from './S2_lin_cloudStateDisconnected_48.svg';
+import CloudStateDisconnected_L from 'illustration:./S2_lin_cloudStateDisconnected_160.svg';
+import CloudStateDisconnected_M from 'illustration:./S2_lin_cloudStateDisconnected_96.svg';
+import CloudStateDisconnected_S from 'illustration:./S2_lin_cloudStateDisconnected_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import CloudStateError_L from './S2_lin_cloudStateError_160.svg';
-import CloudStateError_M from './S2_lin_cloudStateError_96.svg';
-import CloudStateError_S from './S2_lin_cloudStateError_48.svg';
+import CloudStateError_L from 'illustration:./S2_lin_cloudStateError_160.svg';
+import CloudStateError_M from 'illustration:./S2_lin_cloudStateError_96.svg';
+import CloudStateError_S from 'illustration:./S2_lin_cloudStateError_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import CloudUpload_L from './S2_lin_cloudUpload_160.svg';
-import CloudUpload_M from './S2_lin_cloudUpload_96.svg';
-import CloudUpload_S from './S2_lin_cloudUpload_48.svg';
+import CloudUpload_L from 'illustration:./S2_lin_cloudUpload_160.svg';
+import CloudUpload_M from 'illustration:./S2_lin_cloudUpload_96.svg';
+import CloudUpload_S from 'illustration:./S2_lin_cloudUpload_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import CodeBrackets_L from './S2_lin_codeBrackets_160.svg';
-import CodeBrackets_M from './S2_lin_codeBrackets_96.svg';
-import CodeBrackets_S from './S2_lin_codeBrackets_48.svg';
+import CodeBrackets_L from 'illustration:./S2_lin_codeBrackets_160.svg';
+import CodeBrackets_M from 'illustration:./S2_lin_codeBrackets_96.svg';
+import CodeBrackets_S from 'illustration:./S2_lin_codeBrackets_48.svg';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';