S2 Icon Builder CLI (#6806)

Author: snowystinger

.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", "..."]
 }

.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"],

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",

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';
 

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';
 

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';
 

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';
 

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';
 

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';
 

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';