sanity-plugin-iconify 1.1.2 → 2.0.1

package/src/iconify-input.tsx

@@ -1,16 +1,13 @@
-import { Flex, RootTheme, Stack, studioTheme, Text, ThemeProvider, useTheme } from '@sanity/ui';
-import { useCallback, useMemo } from 'react';
-import { ObjectInputProps, set, unset } from 'sanity';
-
+import { Flex, Stack, Text, ThemeProvider } from '@sanity/ui';
+import { buildTheme } from '@sanity/ui/theme';
+import { useCallback } from 'react';
+import type { ObjectInputProps } from 'sanity';
+import { set, unset } from 'sanity';
 import { IconifyCombobox } from './combobox';
 import { QueryClientProvider } from './lib/query-client';
-import { IconifyPluginConfig, IconOptions } from './lib/types';
+import type { IconifyPluginConfig, IconOptions } from './lib/types';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
-// -------------- //
-// ICONIFY INPUT //
-// -------------- //
-
 interface IconifyInputProps extends ObjectInputProps {
   config: IconifyPluginConfig;
 }
@@ -27,12 +24,6 @@ export function IconifyInput(props: IconifyInputProps) {
     null;
   const showName = options?.showName ?? config?.showName ?? false;
 
-  const parentTheme = useTheme();
-  const theme: RootTheme = useMemo(
-    () => (parentTheme ? { ...parentTheme.sanity, color: studioTheme.color } : studioTheme),
-    [parentTheme],
-  );
-
   const handleSelect = useCallback(
     (icon: string) => {
       pushChange(icon === '' ? unset() : set(icon, ['name']));
@@ -42,7 +33,7 @@ export function IconifyInput(props: IconifyInputProps) {
 
   return (
     <QueryClientProvider>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={buildTheme()}>
         <Stack space={2}>
           <IconifyCombobox
             selectedIcon={selectedIcon}
@@ -61,7 +52,7 @@ interface IconifyNameDisplayProps {
   name?: string | null;
 }
 
-function IconifyNameDisplay(props: IconifyNameDisplayProps) {
+export function IconifyNameDisplay(props: IconifyNameDisplayProps) {
   const { name } = props;
   const prettyName = usePrettyIconName({ name });
 

package/src/iconify-plugin.tsx

@@ -1,8 +1,8 @@
-import { definePlugin, FieldProps, ObjectInputProps } from 'sanity';
-
+import type { FieldProps, ObjectInputProps } from 'sanity';
+import { definePlugin } from 'sanity';
 import { IconifyInput } from './iconify-input';
 import { IconifyPreview } from './iconify-preview';
-import { IconifyPluginConfig } from './lib/types';
+import type { IconifyPluginConfig } from './lib/types';
 
 /**
  * Usage in `sanity.config.ts` (or .js)

package/src/iconify-preview.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
-import { IconifyIconName, stringToIcon } from '@iconify/utils';
-import { PreviewProps } from 'sanity';
-
+import type { IconifyIconName } from '@iconify/utils';
+import { stringToIcon } from '@iconify/utils';
+import type { PreviewProps } from 'sanity';
 import { QueryClientProvider } from './lib/query-client';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 

package/src/lib/api.ts

@@ -1,9 +1,8 @@
-import { IconifyInfo } from '@iconify/types';
+import type { IconifyInfo } from '@iconify/types';
 import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
 import { useDebounce } from 'use-debounce';
-
-import { IconifySearchResult } from './types';
+import type { IconifySearchResult } from './types';
 
 const BASE_API_URL = 'https://api.iconify.design';
 

package/src/lib/generate-types.js

@@ -1,5 +1,4 @@
 import { writeFile } from 'node:fs/promises';
-
 import { lookupCollections } from '@iconify/json';
 
 /**

package/src/lib/icon-types.gen.ts

@@ -0,0 +1 @@
+export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'ph' | 'solar' | 'tabler' | 'hugeicons' | 'mingcute' | 'ri' | 'bi' | 'carbon' | 'iconamoon' | 'iconoir' | 'ion' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'teenyicons' | 'clarity' | 'bx' | 'bxs' | 'majesticons' | 'ant-design' | 'gg' | 'gravity-ui' | 'octicon' | 'memory' | 'cil' | 'flowbite' | 'mynaui' | 'basil' | 'pixelarticons' | 'akar-icons' | 'ci' | 'system-uicons' | 'typcn' | 'radix-icons' | 'zondicons' | 'ep' | 'circum' | 'mdi-light' | 'fe' | 'eos-icons' | 'bitcoin-icons' | 'charm' | 'prime' | 'humbleicons' | 'uiw' | 'uim' | 'uit' | 'uis' | 'maki' | 'gridicons' | 'mi' | 'weui' | 'quill' | 'gala' | 'lets-icons' | 'f7' | 'mage' | 'marketeq' | 'fluent' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'icon-park' | 'jam' | 'heroicons' | 'pajamas' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'bytesize' | 'ei' | 'streamline' | 'guidance' | 'fa6-solid' | 'fa6-regular' | 'ooui' | 'rivet-icons' | 'nimbus' | 'oui' | 'formkit' | 'line-md' | 'meteocons' | 'svg-spinners' | 'openmoji' | 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'fxemoji' | 'streamline-emojis' | 'bxl' | 'logos' | 'simple-icons' | 'cib' | 'fa6-brands' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'flag' | 'circle-flags' | 'flagpack' | 'cif' | 'gis' | 'map' | 'geo' | 'vscode-icons' | 'codicon' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'game-icons' | 'fad' | 'academicons' | 'wi' | 'healthicons' | 'medical-icon' | 'covid' | 'la' | 'eva' | 'dashicons' | 'flat-color-icons' | 'entypo' | 'foundation' | 'raphael' | 'icons8' | 'iwwa' | 'heroicons-outline' | 'heroicons-solid' | 'fa-solid' | 'fa-regular' | 'fa-brands' | 'fa' | 'fluent-mdl2' | 'fontisto' | 'icomoon-free' | 'subway' | 'oi' | 'wpf' | 'simple-line-icons' | 'et' | 'el' | 'vaadin' | 'grommet-icons' | 'whh' | 'si-glyph' | 'zmdi' | 'ls' | 'bpmn' | 'flat-ui' | 'vs' | 'topcoat' | 'il' | 'websymbol' | 'fontelico' | 'ps' | 'feather' | 'mono-icons' | 'pepicons';

package/src/lib/query-client.tsx

@@ -2,7 +2,7 @@ import {
   QueryClient,
   QueryClientProvider as ReactQueryClientProvider,
 } from '@tanstack/react-query';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export const queryClient = new QueryClient();
 

package/src/lib/types.ts

@@ -1,4 +1,4 @@
-import { IconifyInfo } from '@iconify/types';
+import type { IconifyInfo } from '@iconify/types';
 import type { BaseSchemaDefinition } from 'sanity';
 
 // If this line errors, the type definitions have not been generated.

package/src/lib/use-pretty-icon-name.ts

@@ -1,7 +1,7 @@
-import { IconifyIconName, stringToIcon } from '@iconify/utils';
+import type { IconifyIconName } from '@iconify/utils';
+import { stringToIcon } from '@iconify/utils';
 import { sentenceCase } from 'change-case';
 import { useMemo } from 'react';
-
 import { useIconSetInfo } from './api';
 
 interface UsePrettyIconNameProps {