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<