Fix import path in icon and illustration .d.ts files (#6912)

Author: devongovett

Makefile

@@ -107,7 +107,7 @@ build:
 		do node scripts/buildEsm.js $$pkg; \
 	done
 	node scripts/buildI18n.js
-	node scripts/copyIconDts.js
+	node scripts/generateIconDts.js
 
 website:
 	yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs

packages/@react-spectrum/s2/icon.d.ts

@@ -12,8 +12,15 @@
 
 const glob = require('glob').sync;
 const fs = require('fs');
+const path = require('path');
 
-// We have to copy icon.d.ts for each icon/illustration so TypeScript's import autocomplete works.
+// Generate types for each icon/illustration so TypeScript's import autocomplete works.
 for (let file of glob('packages/@react-spectrum/s2/{icons,illustrations/**}/*.mjs')) {
-  fs.copyFileSync('packages/@react-spectrum/s2/icon.d.ts', file.replace('.mjs', '.d.ts'));
+  let relative = path.relative(path.dirname(file), 'packages/@react-spectrum/s2/dist/types').replaceAll('\\', '/');
+  fs.writeFileSync(file.replace('.mjs', '.d.ts'), `import type {IconProps} from '${relative}';
+import type {ReactNode} from 'react';
+
+declare function Icon(props: IconProps): ReactNode;
+export default Icon;
+`);
 }