I have an app for buying and selling dogs. In my app each dog breed has its own svg file stored in my assets folder (around 150 svg files). When fetching post data from the backend, I get different information about a the post, including the dogBreed, e.g. {dogBreed: golden-retriver}. I want to render the corresponding svg to each post of dogs, but I am unsure about what the best way to deal with this is.
Should my app import all svg files?
Should I convert all the svg files into JSX files? I have done this in other parts of the application.
If i’m going for the JSX solution, should I render the JSX conditionally based on the name like: <${dogBreed}/> (if it is possible), or should I have one component take in the dog breed as a prop and have logic within for conditional rendering? . This would create a huge file, and I’m not sure if 150 if else/switch statements is the way to go. I feel really stuck here.