@react-spectrum/parcel-transformer-s2-icon 0.1.1-nightly.5042 → 0.1.2

package/IconTransformer.js

@@ -57,11 +57,11 @@ module.exports = new Transformer({
           'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`
         },
         typescript: true,
+        ref: true,
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx']
       })
-    ).replace('export default SvgComponent;', '');
-    // will need to use svgr's templating to add ref support if we want that https://github.com/facebook/create-react-app/pull/5457
-    let newFile = template(asset, iconName, optimized);
+    ).replace('export default ForwardRef;', '');
+    let newFile = template(asset, optimized);
     return [{
       type: 'tsx',
       content: newFile,
@@ -72,62 +72,16 @@ module.exports = new Transformer({
   }
 });
 
-function template(asset, iconName, svg) {
-  let importName = iconName
-    .replace(/^S2_Icon_(.*?)_\d+(?:x\d+)?_N$/, '$1')
-    .replace(/^S2_(fill|lin)_(.+)_(.+_)?(\d+)$/, (m, name) => name[0].toUpperCase() + name.slice(1));
-  let iconRename = importName;
-  if (/^[0-9]/.test(importName)) {
-    iconRename = '_' + importName;
-  }
+function template(asset, svg) {
   let normalizedPath = asset.filePath.replaceAll('\\', '/');
   let context = asset.pipeline === 'illustration' || normalizedPath.includes('@react-spectrum/s2/spectrum-illustrations') ? 'IllustrationContext' : 'IconContext';
   return (
 `
-import {IconProps, ${context}, IconContextValue} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
-import {SVGProps, useRef} from 'react';
-import {useContextProps} from 'react-aria-components';
+import {createIcon, ${context}} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
 
 ${svg.replace('import { SVGProps } from "react";', '')}
 
-export default function ${iconRename}(props: IconProps) {
-  let ref = useRef<SVGElement>(null);
-  let ctx;
-  // TODO: remove this default once we release RAC and use DEFAULT_SLOT.
-  [ctx, ref] = useContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, ${context});
-  let {render, styles} = ctx;
-  let {
-    UNSAFE_className,
-    UNSAFE_style,
-    slot,
-    'aria-label': ariaLabel,
-    'aria-hidden': ariaHidden,
-    ...otherProps
-  } = props;
-
-  if (!ariaHidden) {
-    ariaHidden = undefined;
-  }
-
-  let svg = (
-    <SvgComponent
-      {...otherProps}
-      focusable={false}
-      aria-label={ariaLabel}
-      aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
-      role="img"
-      data-slot={slot}
-      className={(UNSAFE_className ?? '') + ' ' + (styles || '')}
-      style={UNSAFE_style} />
-  );
-
-  if (render) {
-    return render(svg);
-  }
-
-  return svg;
-}
-
+export default /*#__PURE__*/ createIcon(ForwardRef, ${context});
 `
   );
 }

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@react-spectrum/parcel-transformer-s2-icon",
-  "version": "0.1.1-nightly.5042+68403fe55",
+  "version": "0.1.2",
   "main": "IconTransformer.js",
   "engines": {
-    "parcel": "2.0.0-dev.1599"
+    "parcel": "^2.0.0"
   },
   "dependencies": {
     "@adobe/spectrum-tokens": "^13.0.0-beta.46",
-    "@parcel/plugin": "2.0.0-dev.1601"
+    "@parcel/plugin": "^2.0.0",
+    "@svgr/core": "^6.2.0",
+    "@svgr/plugin-jsx": "^6.2.0",
+    "@svgr/plugin-svgo": "^6.2.0"
   },
   "rsp": {
     "type": "cli"
@@ -20,5 +23,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "68403fe55489dce3de1b3094c957d598ad719861"
+  "gitHead": "03cfde2890d0e2fe2cbbf7d57848dfd539cd7f82"
 }