System Information
- Strapi Version: 5.0.0-rc.11
- Operating System: MacOS
- Database: SQLlite
- Node Version: 20.16.0
- NPM Version: 10.8.1
- Yarn Version: 1.22.22
In my frontend (TypeScript/React/Next.js using RESTful API), I have an Icon component that accepts a string prop called “icon” which determines which SVG to render. Obviously, this is a finite list of options and I have them typed properly so that IntelliSense works.
However, I have a few places in the custom Strapi content types and components that allows you to enter an icon name via a short text field.
My question:
Is there a way to sync that finite list of icon options so that when you’re entering content, you just select from an enumerator field, rather than the error prone short text entry?
This would give me more safety against typos and allow me to add and remove options as I update the Frontend icon component.
I guess the enum-field is not what you want to use?
You could build that in a work-intensife way by creating a customField.
However you might be better with a collectionType icon where you add all your icon-strings and replace your short-text-field with a relation to collectionType: icon.
I was kind of thinking the collection type would be the way to go.
I’m still pretty new at setting things up. I can limit access to adding to certain collection types to just Super Admins/Admins, right?
I think I was dreaming of a way to push an array of icon strings to Github or somewhere… and then pulling them into the admin as select options somehow.
I figured this out on my own!
- In the frontend, add a script that generates a JSON file containing an array of icon keys in the public directory
- add script to package.json as its own script, and add it to the yarn build script
- I’m using Next.js so I added an api route to fetch the JSON file
- add customField to Strapi admin
- In custom field, fetch the JSON and map the results as select field options