sanity-plugin-iconify 3.0.0 → 4.0.0

package/dist/index.mjs

@@ -0,0 +1,369 @@
+import { definePlugin, set, unset } from "sanity";
+import { Box, Button, Card, Flex, Grid, Popover, Stack, Text, TextInput, ThemeProvider, useToast } from "@sanity/ui";
+import { buildTheme } from "@sanity/ui/theme";
+import { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCombobox } from "downshift";
+import { match } from "ts-pattern";
+import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import styled from "styled-components";
+import { Icon } from "@iconify/react";
+import { TrashIcon } from "@sanity/icons";
+import { stringToIcon } from "@iconify/utils";
+import { sentenceCase } from "change-case";
+//#region src/lib/api.ts
+const BASE_API_URL = "https://api.iconify.design";
+function fetchJson({ url, signal }) {
+	return fetch(url, { signal }).then((response) => {
+		if (!response.ok) throw new Error(`Network error: status ${response.status}`);
+		return response.json();
+	}).then((result) => result, (error) => {
+		if (error instanceof Error) throw error;
+		else {
+			console.error(`Unknown error: ${error}`);
+			throw new Error("Something went wrong");
+		}
+	});
+}
+function useSearch({ collections }) {
+	const queryClient = useQueryClient();
+	const [term, setTerm] = useState("");
+	const [debouncedTerm, setDebouncedTerm] = useDebounce(term, 500);
+	const updateTerm = useCallback((newTerm, updateImmediately = false) => {
+		setTerm(newTerm);
+		if (updateImmediately) setDebouncedTerm(newTerm);
+	}, [setDebouncedTerm]);
+	const { isLoading, isError, error, data, isPlaceholderData } = useQuery({
+		queryKey: [
+			"search",
+			collections,
+			debouncedTerm
+		],
+		queryFn: async ({ signal }) => {
+			const url = new URL(`/search`, BASE_API_URL);
+			url.searchParams.append("query", debouncedTerm);
+			url.searchParams.append("limit", "60");
+			if (collections) url.searchParams.append("prefixes", collections.join(","));
+			const result = debouncedTerm ? await fetchJson({
+				url,
+				signal
+			}) : null;
+			if (result) Object.entries(result.collections).forEach(([prefix, info]) => {
+				queryClient.setQueryData(["iconSetInfo", prefix], info);
+			});
+			return result?.icons ?? [];
+		},
+		enabled: debouncedTerm.length > 0,
+		placeholderData: keepPreviousData,
+		staleTime: 300 * 1e3
+	});
+	return {
+		term,
+		setTerm: updateTerm,
+		debouncedTerm,
+		isLoading,
+		isError,
+		error,
+		data,
+		isPreviousData: isPlaceholderData
+	};
+}
+function useIconSetInfo({ prefix }) {
+	return useQuery({
+		queryKey: ["iconSetInfo", prefix],
+		queryFn: async ({ signal }) => {
+			if (!prefix) return null;
+			const url = new URL("/collection", BASE_API_URL);
+			url.searchParams.append("prefix", prefix);
+			url.searchParams.append("info", "true");
+			return (await fetchJson({
+				url,
+				signal
+			}))?.info ?? null;
+		},
+		staleTime: Infinity
+	});
+}
+styled(Grid)`
+  grid-template-columns: 1fr min-content;
+  position: relative;
+`;
+const OptionsWrapper = styled(Box)`
+  box-sizing: border-box;
+  padding: 0.5rem;
+
+  & [role='listbox'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & [role='option'] {
+    display: grid;
+    place-items: center;
+    width: clamp(3rem, 10vw, 4rem);
+
+    & button {
+      cursor: pointer;
+      width: 100%;
+
+      & > [data-ui='Box'] {
+        display: flex;
+      }
+
+      & svg {
+        aspect-ratio: 1;
+      }
+    }
+  }
+`;
+function MessageWrapper({ children }) {
+	return <Card padding={4}>
+      <Text align="center" muted>
+        {children}
+      </Text>
+    </Card>;
+}
+//#endregion
+//#region src/combobox/search-input.tsx
+const SearchInput = memo(forwardRef((props, ref) => {
+	const { selectedIcon, suffix, onChange, ...rest } = props;
+	return <TextInput {...rest} onChange={onChange} ref={ref} inputMode="search" icon={selectedIcon ? <Icon icon={selectedIcon} /> : null} placeholder={selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."} suffix={suffix} />;
+}));
+SearchInput.displayName = "SearchInput";
+//#endregion
+//#region src/combobox/search-result.tsx
+const SearchResults = memo(forwardRef((props, ref) => {
+	const { state, data, getItemProps, highlightedIndex, ...rest } = props;
+	return <>
+        {(() => {
+		switch (state) {
+			case "initial": return <MessageWrapper>Search for icons</MessageWrapper>;
+			case "loading": return <MessageWrapper>Searching...</MessageWrapper>;
+			case "error": return <MessageWrapper>Something went wrong...</MessageWrapper>;
+			case "empty": return <MessageWrapper>No icons found</MessageWrapper>;
+		}
+	})()}
+
+        <ul {...rest} ref={ref} data-testid="iconify-results" style={{ opacity: state === "stale" ? .5 : 1 }}>
+          {(state === "data" || state === "stale") && data?.map((icon, index) => <li key={icon} {...getItemProps({
+		item: icon,
+		index
+	})}>
+                <Button padding={3} mode="bleed" selected={index === highlightedIndex}>
+                  <Icon icon={icon} width="100%" height="100%" />
+                </Button>
+              </li>)}
+        </ul>
+      </>;
+}));
+//#endregion
+//#region src/combobox/unset-button.tsx
+function UnsetButton(props) {
+	const { onUnset } = props;
+	return <Card border borderLeft={false} padding={1} display="flex" radius={2}>
+      <Button data-testid="iconify-unset" icon={<TrashIcon />} onClick={onUnset} mode="bleed" fontSize={1} padding={2} />
+    </Card>;
+}
+//#endregion
+//#region src/combobox/iconify-combobox.tsx
+const IconifyCombobox = memo(function IconifyCombobox(props) {
+	const { selectedIcon, onSelect: pushSelection, collections, studioElementProps, fieldFocused } = props;
+	const id = useId();
+	const toast = useToast();
+	const inputRef = useRef(null);
+	const composedInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (studioElementProps?.ref) studioElementProps.ref.current = node;
+	}, [studioElementProps?.ref]);
+	const suppressNextBlur = useRef(false);
+	const handleFocus = useCallback((event) => {
+		suppressNextBlur.current = true;
+		setTimeout(() => {
+			suppressNextBlur.current = false;
+		}, 0);
+		studioElementProps?.onFocus?.(event);
+	}, [studioElementProps]);
+	const handleBlur = useCallback((event) => {
+		if (suppressNextBlur.current) {
+			suppressNextBlur.current = false;
+			return;
+		}
+		studioElementProps?.onBlur?.(event);
+	}, [studioElementProps]);
+	const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({ collections });
+	const { isOpen, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectItem, setInputValue, closeMenu } = useCombobox({
+		items: data ?? [],
+		inputValue: term,
+		onInputValueChange({ inputValue, selectedItem }) {
+			if (inputValue !== selectedItem) setTerm(inputValue);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			if (selectedItem) {
+				pushSelection(selectedItem);
+				setTerm("", true);
+				setInputValue("");
+			}
+		}
+	});
+	useEffect(() => {
+		if (!fieldFocused) closeMenu();
+	}, [fieldFocused, closeMenu]);
+	const handleUnset = useCallback(() => {
+		pushSelection("");
+		setTerm("", true);
+		selectItem("");
+	}, [
+		pushSelection,
+		setTerm,
+		selectItem
+	]);
+	useEffect(() => {
+		if (isError) {
+			console.error("Iconify input error:", error);
+			toast.push({
+				id,
+				status: "error",
+				title: "Iconify input error",
+				description: error?.message
+			});
+		}
+	}, [
+		error,
+		id,
+		isError,
+		toast
+	]);
+	const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
+		ref: composedInputRef,
+		id: studioElementProps?.id,
+		"aria-describedby": studioElementProps?.["aria-describedby"],
+		onFocus: handleFocus
+	});
+	return <div>
+      <SearchInput {...inputProps} onBlur={handleBlur} selectedIcon={selectedIcon} suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null} />
+
+      <Popover open={true} style={{ display: isOpen ? "block" : "none" }} placement="bottom" arrow={false} matchReferenceWidth constrainSize referenceElement={inputRef.current} content={<OptionsWrapper>
+            <SearchResults {...getMenuProps()} state={match(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data")} data={data} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
+          </OptionsWrapper>} />
+    </div>;
+});
+//#endregion
+//#region src/lib/query-client.tsx
+const queryClient = new QueryClient();
+function QueryClientProvider$1(props) {
+	return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>;
+}
+//#endregion
+//#region src/lib/use-pretty-icon-name.ts
+function usePrettyIconName(props) {
+	const { name } = props;
+	const iconMeta = useMemo(() => props.iconMeta ?? (name ? stringToIcon(name) : null), [name, props.iconMeta]);
+	const iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
+	return useMemo(() => iconMeta ? {
+		name: sentenceCase(iconMeta.name),
+		collection: iconSetInfo.data?.name ?? iconMeta.prefix
+	} : null, [iconMeta, iconSetInfo.data?.name]);
+}
+//#endregion
+//#region src/iconify-input.tsx
+const theme = buildTheme();
+const IconifyInput = memo(function IconifyInput(props) {
+	const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props;
+	const selectedIcon = value?.name ?? null;
+	const options = schemaType.options;
+	const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
+	const showName = options?.showName ?? config?.showName ?? false;
+	const handleSelect = useCallback((icon) => {
+		pushChange(icon === "" ? unset() : set(icon, ["name"]));
+	}, [pushChange]);
+	return <QueryClientProvider$1>
+      <ThemeProvider theme={theme}>
+        <Stack space={2}>
+          <IconifyCombobox selectedIcon={selectedIcon} onSelect={handleSelect} collections={collections} studioElementProps={elementProps} fieldFocused={focused} />
+
+          {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
+        </Stack>
+      </ThemeProvider>
+    </QueryClientProvider$1>;
+});
+function IconifyNameDisplay(props) {
+	const { name } = props;
+	const prettyName = usePrettyIconName({ name });
+	return <Flex gap={1}>
+      <Text size={1} muted>
+        Selected:
+      </Text>
+
+      <Text size={1} weight="semibold">
+        {prettyName?.name ?? name}
+      </Text>
+
+      {prettyName?.collection && <Text size={1} muted style={{ fontStyle: "italic" }}>
+          by {prettyName?.collection}
+        </Text>}
+    </Flex>;
+}
+//#endregion
+//#region src/iconify-preview.tsx
+const IconifyPreview = memo(function IconifyPreview(props) {
+	const { title } = props;
+	const iconName = typeof props.title === "string" ? stringToIcon(props.title) : null;
+	if (typeof title === "string" && iconName) return <QueryClientProvider$1>
+        <IconifyPreviewInner {...props} iconName={title} iconMeta={iconName} />
+      </QueryClientProvider$1>;
+	return props.renderDefault(props);
+});
+function IconifyPreviewInner(props) {
+	const { iconMeta, iconName, ...previewProps } = props;
+	const prettyName = usePrettyIconName({ iconMeta });
+	return props.renderDefault({
+		...previewProps,
+		media: <Icon icon={iconName} />,
+		title: prettyName?.name ?? iconName,
+		subtitle: prettyName?.collection
+	});
+}
+//#endregion
+//#region src/iconify-plugin.tsx
+/**
+* Usage in `sanity.config.ts` (or .js)
+*
+* ```ts
+* import { defineConfig } from 'sanity'
+* import { iconify } from 'sanity-plugin-iconify'
+*
+* export default defineConfig({
+*   // ...
+*   plugins: [iconify()],
+* })
+* ```
+*/
+const iconify = definePlugin((config = {}) => {
+	return {
+		name: "sanity-plugin-iconify",
+		schema: { types: [{
+			name: "icon",
+			title: "Icon",
+			type: "object",
+			fields: [{
+				name: "name",
+				title: "Name",
+				type: "string"
+			}],
+			components: {
+				input: (props) => <IconifyInput {...props} config={config} />,
+				preview: IconifyPreview,
+				field: (props) => props.renderDefault({
+					...props,
+					level: 0
+				})
+			}
+		}] }
+	};
+});
+//#endregion
+export { iconify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iconify",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Icon picker based on Iconify",
   "keywords": [
     "sanity",
@@ -21,15 +21,20 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist",
     "sanity.json",
@@ -37,10 +42,8 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s build:clean build:verify build:bundle build:check",
-    "build:bundle": "pkg-utils build --strict",
-    "build:check": "pkg-utils --strict",
-    "build:clean": "rimraf dist",
+    "build": "run-s build:verify build:bundle",
+    "build:bundle": "tsdown",
     "build:verify": "plugin-kit verify-package --silent",
     "dev": "vite dev --config dev/vite.config.ts",
     "format": "prettier --write --cache --ignore-unknown .",
@@ -53,78 +56,97 @@
     "test:e2e:ui": "playwright test --ui",
     "test:ui": "vitest --ui",
     "test:watch": "vitest",
-    "watch": "pkg-utils watch --strict"
+    "watch": "tsdown --watch"
   },
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
     "@iconify/react": "^6.0.2",
-    "@iconify/utils": "^3.1.0",
+    "@iconify/utils": "^3.1.3",
     "@sanity/icons": "^3.7.4",
     "@sanity/incompatible-plugin": "^1.0.5",
-    "@sanity/ui": "^3.1.3",
-    "@tanstack/react-query": "^5.89.0",
+    "@sanity/ui": "^3.2.0",
+    "@tanstack/react-query": "^5.101.0",
     "change-case": "^5.4.4",
-    "downshift": "^9.0.13",
+    "downshift": "^9.3.6",
     "ts-pattern": "^5.9.0",
-    "use-debounce": "^10.0.6"
+    "use-debounce": "^10.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
-    "@iconify/json": "^2.2.420",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@iconify/json": "^2.2.486",
     "@iconify/types": "^2.0.0",
-    "@playwright/test": "^1.58.2",
-    "@release-it/conventional-changelog": "^10.0.4",
-    "@sanity/pkg-utils": "^10.2.3",
+    "@playwright/test": "^1.61.0",
+    "@release-it/conventional-changelog": "^11.0.1",
     "@sanity/plugin-kit": "^4.0.20",
-    "@tanstack/eslint-plugin-query": "^5.89.0",
-    "@tanstack/react-query-devtools": "^5.89.0",
-    "@types/react": "^19.2.7",
+    "@tanstack/eslint-plugin-query": "^5.101.0",
+    "@tanstack/react-query-devtools": "^5.101.0",
+    "@types/react": "^19.2.17",
     "@types/styled-components": "^5.1.36",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/ui": "^4.1.0",
-    "@waspeer/config": "^2.4.5",
-    "eslint": "9.39.2",
-    "lefthook": "^2.0.12",
-    "npm-run-all2": "^8.0.4",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-is": "^19.2.3",
-    "release-it": "^19.1.0",
-    "rimraf": "^6.1.2",
-    "sanity": "^5.0.1",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.1.0"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/ui": "^4.1.9",
+    "@waspeer/config": "^3.0.0",
+    "eslint": "^10.1.0",
+    "lefthook": "^2.1.9",
+    "npm-run-all2": "^9.0.2",
+    "prettier": "^3.8.4",
+    "publint": "^0.3.18",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-is": "^19.2.7",
+    "release-it": "^20.2.0",
+    "rimraf": "^6.1.3",
+    "sanity": "^6.0.0",
+    "tsdown": "^0.22.2",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "react": "^19.2",
-    "sanity": "^5.0.0-0",
+    "sanity": "^5.0.0-0 || ^6.0.0-0",
     "styled-components": "^6"
   },
   "packageManager": "pnpm@10.17.0",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=22.12"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",
-      "lefthook"
+      "lefthook",
+      "unrs-resolver"
     ],
     "overrides": {
-      "esbuild@<=0.24.2": ">=0.25.0",
-      "eslint": "^9",
+      "@babel/core@<7.29.6": ">=7.29.6",
+      "@isaacs/brace-expansion@<5.0.1": ">=5.0.1",
+      "@typescript-eslint/utils": "^8.61.1",
+      "brace-expansion@>=4.0.0 <5.0.6": ">=5.0.6",
+      "brace-expansion@<2.0.3": ">=2.0.3",
+      "esbuild@<0.28.1": ">=0.28.1",
+      "follow-redirects@<1.16.0": ">=1.16.0",
+      "lodash@<4.17.23": ">=4.17.23",
       "micromatch@<4.0.8": ">=4.0.8",
-      "prismjs@<1.30.0": ">=1.30.0"
+      "minimatch@<10.2.3": ">=10.2.3",
+      "picomatch@<4.0.4": ">=4.0.4",
+      "postcss@<8.5.10": ">=8.5.10",
+      "prismjs@<1.30.0": ">=1.30.0",
+      "rollup@<4.59.0": ">=4.59.0",
+      "serialize-javascript@<7.0.5": ">=7.0.5",
+      "shell-quote@<1.8.4": ">=1.8.4",
+      "tmp@<0.2.6": ">=0.2.6",
+      "uuid@>=11.0.0 <11.1.1": ">=11.1.1"
     }
   },
   "sanityPlugin": {
     "verifyPackage": {
       "scripts": false,
       "eslintImports": false,
-      "nodeEngine": false
+      "nodeEngine": false,
+      "pkg-utils": false,
+      "rollupConfig": false,
+      "tsconfig": false
     }
   }
 }

package/src/combobox/search-input.tsx

@@ -2,18 +2,28 @@ import { Icon } from '@iconify/react';
 import { TextInput } from '@sanity/ui';
 import { forwardRef, memo } from 'react';
 
-interface SearchInputProps extends React.HTMLAttributes<HTMLInputElement> {
+interface SearchInputProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  // downshift's getInputProps() returns onChange typed against the generic
+  // `Element` (React.ChangeEventHandler with no element parameter), which is
+  // wider than HTMLAttributes' onChange. Accept that signature so the props
+  // spread from getInputProps() stays type-compatible.
+  onChange?: React.ChangeEventHandler;
   selectedIcon: string | null;
   suffix?: React.ReactNode;
 }
 
 export const SearchInput = memo(
   forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
-    const { selectedIcon, suffix, ...rest } = props;
+    const { selectedIcon, suffix, onChange, ...rest } = props;
 
     return (
       <TextInput
         {...rest}
+        // downshift types onChange against the generic `Element`; Sanity UI's
+        // TextInput expects an HTMLInputElement handler. The handler is only
+        // forwarded to the underlying <input>, so the element-generic
+        // difference is purely a type-variance mismatch with no runtime effect.
+        onChange={onChange as React.ChangeEventHandler<HTMLInputElement> | undefined}
         ref={ref}
         inputMode="search"
         icon={selectedIcon ? <Icon icon={selectedIcon} /> : null}

package/src/lib/api.ts

@@ -44,6 +44,7 @@ export function useSearch({ collections }: { collections: string[] | null }) {
     [setDebouncedTerm],
   );
 
+  // eslint-disable-next-line @tanstack/query/exhaustive-deps -- queryClient from useQueryClient() is a stable reference, not a query dependency
   const { isLoading, isError, error, data, isPlaceholderData } = useQuery<string[], Error>({
     queryKey: ['search', collections, debouncedTerm],
     queryFn: async ({ signal }) => {

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

@@ -1 +1 @@
-export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'mdi-light' | 'line-md' | 'solar' | 'tabler' | 'boxicons' | 'mingcute' | 'ri' | 'mynaui' | 'iconamoon' | 'iconoir' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'si' | 'majesticons' | 'gg' | 'flowbite' | 'basil' | 'pixelarticons' | 'pixel' | 'akar-icons' | 'ci' | 'proicons' | 'typcn' | 'meteor-icons' | 'prime' | 'circum' | 'fe' | 'eos-icons' | 'bitcoin-icons' | 'humbleicons' | 'uim' | 'uit' | 'uis' | 'gridicons' | 'mi' | 'cuida' | 'weui' | 'duo-icons' | 'svg-spinners' | 'hugeicons' | 'lets-icons' | 'streamline-ultimate' | 'streamline-plump' | 'streamline-sharp' | 'mage' | 'stash' | 'lineicons' | 'wordpress' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'jam' | 'streamline-cyber' | 'guidance' | 'carbon' | 'ion' | 'famicons' | 'ant-design' | 'lsicon' | 'gravity-ui' | 'cil' | 'roentgen' | 'ep' | 'charm' | 'quill' | 'bytesize' | 'bi' | 'streamline-pixel' | 'streamline-block' | 'rivet-icons' | 'nimbus' | 'formkit' | 'fluent' | 'ph' | 'glyphs' | 'glyphs-poly' | 'teenyicons' | 'clarity' | 'streamline-freehand' | 'ix' | 'octicon' | 'memory' | 'system-uicons' | 'radix-icons' | 'zondicons' | 'uiw' | 'codex' | 'ei' | 'heroicons' | 'sidekickicons' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'f7' | 'pajamas' | 'garden' | 'streamline' | 'streamline-flex' | 'fa7-solid' | 'fa7-regular' | 'picon' | 'ooui' | 'maki' | 'temaki' | 'oui' | 'nrk' | 'dinkie-icons' | 'qlementine-icons' | 'streamline-ultimate-color' | 'streamline-plump-color' | 'streamline-freehand-color' | 'streamline-kameleon-color' | 'streamline-stickies-color' | 'fluent-color' | 'streamline-color' | 'streamline-flex-color' | 'streamline-sharp-color' | 'streamline-cyber-color' | 'icon-park' | 'marketeq' | 'vscode-icons' | 'codicon' | 'material-icon-theme' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'simple-icons' | 'logos' | 'streamline-logos' | 'cib' | 'fa7-brands' | 'bxl' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'openmoji' | 'twemoji' | 'noto' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'fxemoji' | 'streamline-emojis' | 'circle-flags' | 'flag' | 'flagpack' | 'cif' | 'gis' | 'map' | 'geo' | 'game-icons' | 'fad' | 'academicons' | 'wi' | 'meteocons' | 'healthicons' | 'medical-icon' | 'covid' | 'la' | 'eva' | 'dashicons' | 'flat-color-icons' | 'entypo' | 'foundation' | 'raphael' | 'icons8' | 'iwwa' | 'gala' | 'heroicons-outline' | 'heroicons-solid' | 'bx' | 'bxs' | 'fa6-solid' | 'fa6-regular' | 'fa6-brands' | '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' | 'fluent-emoji';
+export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'mdi-light' | 'line-md' | 'solar' | 'tabler' | 'boxicons' | 'mingcute' | 'ri' | 'mynaui' | 'iconamoon' | 'iconoir' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'si' | 'majesticons' | 'gg' | 'flowbite' | 'basil' | 'pixelarticons' | 'pixel' | 'akar-icons' | 'ci' | 'proicons' | 'typcn' | 'meteor-icons' | 'prime' | 'circum' | 'fe' | 'eos-icons' | 'bitcoin-icons' | 'humbleicons' | 'uim' | 'uit' | 'uis' | 'gridicons' | 'mi' | 'cuida' | 'weui' | 'duo-icons' | 'svg-spinners' | 'hugeicons' | 'lets-icons' | 'streamline-ultimate' | 'streamline-plump' | 'streamline-sharp' | 'mage' | 'stash' | 'lineicons' | 'wordpress' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'jam' | 'streamline-cyber' | 'guidance' | 'carbon' | 'ion' | 'famicons' | 'ant-design' | 'lsicon' | 'gravity-ui' | 'cil' | 'at-icons' | 'ep' | 'charm' | 'quill' | 'bytesize' | 'bi' | 'streamline-pixel' | 'streamline-block' | 'rivet-icons' | 'nimbus' | 'formkit' | 'fluent' | 'ph' | 'glyphs' | 'glyphs-poly' | 'teenyicons' | 'clarity' | 'streamline-freehand' | 'ix' | 'octicon' | 'memory' | 'system-uicons' | 'radix-icons' | 'zondicons' | 'uiw' | 'codex' | 'ei' | 'heroicons' | 'sidekickicons' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'f7' | 'pajamas' | 'garden' | 'streamline' | 'streamline-flex' | 'fa7-solid' | 'fa7-regular' | 'picon' | 'ooui' | 'oui' | 'nrk' | 'dinkie-icons' | 'qlementine-icons' | 'streamline-ultimate-color' | 'streamline-plump-color' | 'streamline-freehand-color' | 'streamline-kameleon-color' | 'streamline-stickies-color' | 'fluent-color' | 'streamline-color' | 'streamline-flex-color' | 'streamline-sharp-color' | 'streamline-cyber-color' | 'icon-park' | 'marketeq' | 'vscode-icons' | 'codicon' | 'material-icon-theme' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'gcp' | 'unjs' | 'simple-icons' | 'logos' | 'streamline-logos' | 'cib' | 'fa7-brands' | 'bxl' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'openmoji' | 'twemoji' | 'noto' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'fxemoji' | 'streamline-emojis' | 'circle-flags' | 'flag' | 'flagpack' | 'cif' | 'pinhead' | 'roentgen' | 'maki' | 'temaki' | 'gis' | 'map' | 'geo' | 'game-icons' | 'fad' | 'academicons' | 'wi' | 'meteocons' | 'healthicons' | 'medical-icon' | 'covid' | 'ginetex' | 'la' | 'eva' | 'dashicons' | 'flat-color-icons' | 'entypo' | 'foundation' | 'raphael' | 'icons8' | 'iwwa' | 'gala' | 'heroicons-outline' | 'heroicons-solid' | 'bx' | 'bxs' | 'fa6-solid' | 'fa6-regular' | 'fa6-brands' | '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' | 'fluent-emoji';