Images as inline SVGs

Hi there, we need to dynamically manage icon colors, thus we'd like to be able to handle prismic images as inline SVG. As this is not the default behaviour (), how can we handle that ? Thanks

You can use SVGs with prismic, and you can set the text colour / background colour of the SVG container for dynamic image colours.

Hey Simon welcome to the forum!

Well, you can't actually modify the colors of an SVG file inside Prismic. But you can add another field, like a select, or key text field just beside your image field that serves as a 'class name' selector. That way you can select a given color while editing your documents and then add it as an actual CSS attribute in the code!

@prismic1 Hi Simon - im currently facing the same problem - needing to load svg's inline so i can dynamically style them - did you find any solution to this? Ive tried a few different methods for rendering inline svgs with varying levels of success/hacky-ness but i feel using a rich text field to render the svg code isnt a great solution....

1 Like

This thread has been closed due to inactivity. Flag to reopen.

@digital2 , you've probably solved this by now, but if not our solution to access SVGs programmatically was to create a library of SVGs in code (in our case a Nextjs app) and allow content editors to chose which SVG they want to display with a Select field.

Obviously we lose the benefits of having a dynamic solution for content editors.

I've done it in a couple of projects - I'll write an article about it

Hi @kris
Did you write your mentioned article? If so, where can I find it?
I'm currently facing the same problem...

Hey @andre.lergier, this got lost in my todo list, but I'll get it over to you either today or tomorrow.

1 Like

This would be awesome, thank you @kris. Looking forward to it.