Core: Convert template globalTypes to @storybook/icons components

The core sandbox template still passed legacy string icon names in its
toolbar configs, which no longer typecheck under ToolbarIconType. Switch
to individually imported icon components.

Author: ObviousApp

code/core/template/stories/preview.ts

@@ -1,3 +1,11 @@
+import {
+  CircleHollowIcon,
+  GlobeIcon,
+  MoonIcon,
+  SideBySideIcon,
+  StackedIcon,
+  SunIcon,
+} from '@storybook/icons';
 import type { GlobalTypes, PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
 declare global {
@@ -67,21 +75,21 @@ export const globalTypes = {
     name: 'Theme',
     description: 'Global theme for components',
     toolbar: {
-      icon: 'circlehollow',
+      icon: CircleHollowIcon,
       title: 'Theme',
       items: [
-        { value: 'light', icon: 'sun', title: 'light' },
-        { value: 'dark', icon: 'moon', title: 'dark' },
-        { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' },
-        { value: 'stacked', icon: 'stacked', title: 'stacked' },
+        { value: 'light', icon: SunIcon, title: 'light' },
+        { value: 'dark', icon: MoonIcon, title: 'dark' },
+        { value: 'side-by-side', icon: SideBySideIcon, title: 'side by side' },
+        { value: 'stacked', icon: StackedIcon, title: 'stacked' },
       ],
     },
   },
   locale: {
     name: 'Locale',
     description: 'Internationalization locale',
     toolbar: {
-      icon: 'globe',
+      icon: GlobeIcon,
       shortcuts: {
         next: {
           label: 'Go to next language',