diff --git a/.changeset/stupid-rats-scream.md b/.changeset/stupid-rats-scream.md new file mode 100644 index 00000000..8faea87d --- /dev/null +++ b/.changeset/stupid-rats-scream.md @@ -0,0 +1,5 @@ +--- +"@tinloof/sanity-studio": patch +--- + +iconSchema path option diff --git a/packages/sanity-studio/README.md b/packages/sanity-studio/README.md index 23334f76..54d9c58b 100644 --- a/packages/sanity-studio/README.md +++ b/packages/sanity-studio/README.md @@ -25,7 +25,7 @@ npm install @tinloof/sanity-studio - [Add sections to your Sanity schema](#4-add-sections-to-your-sanity-schema) - [`documentI18n`](#documenti18n) - [`localizedItem`](#localizedItem) -- [`defineIcon`](#defineIcon) +- [`iconSchema`](#iconSchema) - [Disable creation plugin](#disable-creation-plugin) - [Input with characters count](#input-with-characters-count) @@ -454,14 +454,14 @@ The utility will create a nested structure with: - An "All" option showing all documents of the specified type - Individual locale options that filter documents by their `locale` field -## `defineIcon` +## `iconSchema` Builds upon a string field with an options list to show a preview of the icon select as well as other options. ### Basic usage ```tsx -import { defineIcon } from "@tinloof/sanity-studio"; +import { iconSchema } from "@tinloof/sanity-studio"; import { defineType } from "sanity"; export default defineType({ @@ -472,16 +472,17 @@ export default defineType({ type: "string", name: "title", }, - defineIcon({ - name: "icon", + { + ...iconSchema, options: { list: [ { title: "Calendar", value: "calendar" }, { title: "Chat", value: "chat" }, { title: "Clock", value: "clock" }, ], + path: "/icons/select", }, - }), + }, ], }); ``` @@ -489,8 +490,7 @@ export default defineType({ ### Parameters - `options.list`: Uses the default string option list type of `{title: string, value: string}[]` - -The ultility searches for icons within the folder `/icons/select/[icon-value].svg`, if you have a Next.js embbedded setup then store them under `/public/icons/select/[icon-value].svg`. +- `options.path`: Path where icons are located ## Disable creation plugin diff --git a/packages/sanity-studio/src/components/IconSelectComponent.tsx b/packages/sanity-studio/src/components/IconSelectComponent.tsx index 7c409dda..c2934a3e 100644 --- a/packages/sanity-studio/src/components/IconSelectComponent.tsx +++ b/packages/sanity-studio/src/components/IconSelectComponent.tsx @@ -73,6 +73,11 @@ export function IconSelectComponent(props: IconInputProps): JSX.Element { const iconOptions = options as IconOptions | undefined; const iconList = iconOptions?.list ?? []; + let iconsPath = iconOptions?.path ?? ""; + // Add / to the end of the path if it's not there + if (!iconsPath.endsWith("/")) { + iconsPath += "/"; + } const [open, setOpen] = useState(false); const onClose = useCallback(() => setOpen(false), []); @@ -125,7 +130,7 @@ export function IconSelectComponent(props: IconInputProps): JSX.Element { height: "24px", width: "24px", }} - src={`/icons/select/${value}.svg`} + src={`${iconsPath}${value}.svg`} /> {addSpaceBeforeCapitalLetters(value)} @@ -175,7 +180,7 @@ export function IconSelectComponent(props: IconInputProps): JSX.Element { onClick={() => onIconChange(icon.value)} value={icon.value} > - + ); })} @@ -198,12 +203,18 @@ const IconStyles = { width: "32px", }; -function BlockVariantCard({ icon }: { icon: string }) { +function BlockVariantCard({ + icon, + iconsPath, +}: { + icon: string; + iconsPath: string; +}) { return ( diff --git a/packages/sanity-studio/src/types.ts b/packages/sanity-studio/src/types.ts index 2f9be600..7c82b9ec 100644 --- a/packages/sanity-studio/src/types.ts +++ b/packages/sanity-studio/src/types.ts @@ -221,6 +221,7 @@ export type PathnameInputProps = ObjectFieldProps & { export type IconOptions = { list: { title: string; value: string }[]; + path: string; }; export type IconParams = Omit<