How to work with SVG in Prismic?

Describe your question/issue in detail

I've several slices that rely on icons. In my project, I use icons from lucide.dev.

But since there's no option to select an icon, it seems genuinely impossible to deal with this issue without first converting the svg to image form.

Because with SVG i've the option to set the stroke width, change the fill and stroke color and resize as I see fit.

What steps have you taken to resolve this issue already?

  1. Tried imagix params to change the color, but SVGs aren't served through imagix.
  2. Tried classes to make this work, but it doesn't.

In your Webinar you guys said that you use Primisc for your own website. How are you managing SVGs because it all over your website.

Hey @aadtyaraj01,

I've managed two ways to get SVGs working with Prismic. A simple way that only renders the SVG, and a more advanced way that can do everything you described. I imagine their website uses something similar.

For both solutions we start with an image selector in Prismic where we will later upload the SVG file:

In our code, we then take that image URL and load the file. Once the file is loaded all that's left is to convert it to text & render it into the code. Here's a very short, functioning code example:

I also wanted to be able to modify properties, namely the color of the SVG. So for a little more advanced solution I used a group inside of Prismic:

This group lets me upload the SVG, and also specify the stroke width, color and background:

After you've created your group, on the code side we do the same as the basic solution I described above. However after loading the SVG file, we need to add a step to parse the SVG from text into HTML. Once it's parsed, now we're able to modify properties like stroke width & color using normal javascript:

And finally, here's the end result of this using an icon from lucide.dev:
Screenshot 2024-07-17 at 5.13.55 AM

I found it all a little confusing so i've put a functioning example up on github.

If you need help integrating this into your stack i'm happy to help out.

Cheers,