fix(@sanity/assist): render instruction preview icons from @sanity/icons v5 (#1503)

The instruction schema's prepare() returns a rendered <Icon symbol> element
for instructions with a custom icon (since the icons v5 lazy-map migration),
but the preview component still rendered props.icon as a component, crashing
the instruction list with 'Element type is invalid ... got: <Icon />'.
Handle both the element and the component (SparklesIcon fallback) shapes.

Also add a README troubleshooting section for MISSING_EXPORT icon build
errors, which come from code importing icons from the @sanity/icons package
root - a pattern removed in v5 (the plugin itself already uses the per-icon
export paths).

Fixes #1495

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com>

Author: stipsan

.changeset/assist-icons-v5-troubleshooting.md

@@ -0,0 +1,5 @@
+---
+"@sanity/assist": patch
+---
+
+Fix a crash ("Element type is invalid … got: <Icon />") when rendering the instruction list for instructions with a custom icon. Since the `@sanity/icons` v5 migration the instruction preview received a rendered icon element but kept rendering it as a component; it now handles both. The README also gains a troubleshooting section for `MISSING_EXPORT` icon build errors, which come from code importing icons from the `@sanity/icons` package root — a pattern removed in v5 (this plugin already uses the per-icon export paths).

plugins/@sanity/assist/README.md

@@ -5,6 +5,7 @@
 - [Table of contents](#table-of-contents)
 - [About Sanity AI Assist](#about-sanity-ai-assist)
 - [Installation](#installation)
+  - [Build errors about missing icon exports](#build-errors-about-missing-icon-exports)
 - [Setup](#setup)
   - [Add the plugin](#add-the-plugin)
   - [Enabling the AI Assist API](#enabling-the-ai-assist-api)
@@ -57,6 +58,30 @@ npm install @sanity/assist sanity@latest
 
 This plugin requires `sanity` version `3.26` or greater.
 
+### Build errors about missing icon exports
+
+This plugin depends on `@sanity/icons` v5, which [removed the per-icon exports from the package root](https://github.com/sanity-io/icons/releases/tag/v5.0.0): every icon now lives on its own export path. If `sanity build` or `sanity dev` fails with an error like
+
+```
+[MISSING_EXPORT] "CopyIcon" is not exported by "node_modules/@sanity/icons/dist/index.js"
+```
+
+the file referenced by the error still imports icons from the package root — usually the studio's own schema or structure code, or another dependency that has not been updated yet. Update those imports to the per-icon export paths:
+
+```diff
+- import {CopyIcon, ListIcon} from '@sanity/icons'
++ import {CopyIcon} from '@sanity/icons/Copy'
++ import {ListIcon} from '@sanity/icons/List'
+```
+
+Also make sure `@sanity/icons` is declared in the studio's own `package.json` when studio code imports it; which copy an undeclared import resolves to depends on package manager hoisting, and can change when installing or upgrading plugins.
+
+If you cannot update the importing code right away (for example when it lives in a third-party package), pin `@sanity/icons` to v4 in the studio's own `package.json` until it catches up — v4 supports both import styles:
+
+```sh
+npm install @sanity/icons@4
+```
+
 ## Setup
 
 > **Note:** AI Assist is available for all projects on the Growth plan and up.

plugins/@sanity/assist/src/schemas/assistDocumentSchema.tsx

@@ -5,6 +5,7 @@ import {LockIcon} from '@sanity/icons/Lock'
 import {SparklesIcon} from '@sanity/icons/Sparkles'
 import {ThListIcon} from '@sanity/icons/ThList'
 import {Box, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {isValidElement} from 'react'
 import {defineArrayMember, defineField, defineType, type ObjectSchemaType} from 'sanity'
 
 import {AssistDocumentForm} from '../assistDocument/components/AssistDocumentForm'
@@ -267,16 +268,17 @@ export const instruction = defineType({
   components: {
     input: InstructionInput,
     preview: (props: any) => {
-      const Icon = props.icon
+      // `icon` from `prepare` is either a rendered element (<Icon symbol={...} />) or a
+      // component (the SparklesIcon fallback), so it cannot be rendered as <IconValue /> directly
+      const IconValue = props.icon
+      const icon = isValidElement(IconValue) ? IconValue : IconValue ? <IconValue /> : null
       return (
         <Flex gap={3} align="center" padding={2}>
-          {Icon && (
+          {icon ? (
             <Box flex="none">
-              <Text size={1}>
-                <Icon />
-              </Text>
+              <Text size={1}>{icon}</Text>
             </Box>
-          )}
+          ) : null}
 
           <Stack flex={1} gap={2}>
             <Text size={1} textOverflow="ellipsis" weight="medium">