Merge pull request #124 from tinloof/tin-2703-icon-path-override

Icon path override
tinloof · Jan 15, 2025 · 624a3ca · 624a3ca
2 parents df5b64c + 4cf564d
commit 624a3ca
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/.changeset/stupid-rats-scream.md 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
@@ -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,25 +472,25 @@ 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",
       },
-    }),
+    },
   ],
 });
 ```
 
 ### 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
@@ -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`}
                 />
               </IconContainer>
               <Text>{addSpaceBeforeCapitalLetters(value)}</Text>
@@ -175,7 +180,7 @@ export function IconSelectComponent(props: IconInputProps): JSX.Element {
                     onClick={() => onIconChange(icon.value)}
                     value={icon.value}
                   >
-                    <BlockVariantCard icon={icon.value} />
+                    <BlockVariantCard icon={icon.value} iconsPath={iconsPath} />
                   </Flex>
                 );
               })}
@@ -198,12 +203,18 @@ const IconStyles = {
   width: "32px",
 };
 
-function BlockVariantCard({ icon }: { icon: string }) {
+function BlockVariantCard({
+  icon,
+  iconsPath,
+}: {
+  icon: string;
+  iconsPath: string;
+}) {
   return (
     <BlockVariantCardContainer>
       <img
         className="select-icon"
-        src={`/icons/select/${icon}.svg`}
+        src={`${iconsPath}${icon}.svg`}
         style={IconStyles}
       />
       <Text style={{ textAlign: "center" }} size={0}>

diff --git a/packages/sanity-studio/src/types.ts b/packages/sanity-studio/src/types.ts
@@ -221,6 +221,7 @@ export type PathnameInputProps = ObjectFieldProps<SlugValue> & {
 
 export type IconOptions = {
   list: { title: string; value: string }[];
+  path: string;
 };
 
 export type IconParams = Omit<