fix: example urls with icons

[snowystinger]

Closes

Go to a doc page like RSP's ActionButton, add an icon, get the share url for the example and paste it into a new window. It should render with no errors and the icon should be displayed.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[devongovett]

The problem with this is that it breaks the code splitting, so now every icon will be loaded on every page even if the component doesn't have an icon picker...

[snowystinger]

Ah, hmm is there a way to send it as a rsc?

[snowystinger]

Otherwise I guess I could send the svg directly

[devongovett]

You could maybe load it dynamically if you export the icon map from the icon picker file?

const LazyIcon = lazy(() => import('./IconPicker')
  .then(({icons}) => ({default: ({icon}) => createElement(icons[icon])}))

essentially this creates a LazyIcon component that accepts an icon prop and gets that icon from the map.

<LazyIcon icon="whatever" />

[snowystinger]

sure yeah, could do that

[devongovett]

Or even better put the LazyIcon component in the IconPicker file and lazily load that. Idk what I was thinking

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs