Services Plugins FAQs

How do I get a library of all the svg files used in a template

Templates
#1

I want to do bulk color update on all of the svg files in my template. I need to change the colors. What is the best way to do this?

Thank you!

#2

Hi @tristan, thank you for your message.

I would recommend you use the HTML element in your design, add the link to your SVG file and mention the color .
Here is a link where you can get familiar with how it could be done: css - How to change the color of an svg element? - Stack Overflow
How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

Besides that, I would recommend you to do a search on the Bubble’s Forum and look for a solution there, as this is a question related to the Bubble’s functionality you can find there more threads about this question. Here is one of the many thread regarding changing SVG icon colors: Editable Icon Library - #18 by duke.severn - Idea - Bubble Forum

Let me know if you sorted it out, or if there is anything else we can assist you with :slight_smile:

#3

Thanks. So here’s what I did (so that others don’t need to go through the figuring it out process):

  1. Copy the URL link to the .svg file (it’s hosted on AWS S3). It will look something like: //s3.amazonaws.com/appforest_uf/f1597394773363x325744427317602000/contract-3.svg

  2. Grab a HTML code from the left menu bar and place it in position of the old icon

  3. Make sure the HTML object is the same size as the icon it was replacing

  4. Click on the page and bring up the editor

  5. Go to https://codepen.io/sosuke/pen/Pjoqqp to convert your color code from HEX into CSS Style

  6. Post the following HTML code into the header section:

<head>
<style>


.filter-pink{
      filter: invert(21%) sepia(99%) saturate(4867%) hue-rotate(312deg) brightness(96%) contrast(96%);
    }

</style>
</head>
  1. Lastly, use the following HTML code to change the color of the svg:
<img src="YOUR SVG URL" class="filter-pink"/>"

Hope that helps!

#4

Hi Greg,

So I managed to change the icon colors using HTML but it’s still not the same as the HEX code. It’s just slightly off.

Also, the option set icons cannot be changed using this method. So what do you propose for them? Surely one must edit the svg file directly?

Thanks
Tristan

#5

Hey @tristan,

Please check the below thread, as there you can find a detailed explanation on how to change the color and use the icons afterwards - Font Awesome 5 support - #22 by patricia - Idea - Bubble Forum

As well, you can upload all the customized (colored) icons on a dedicated page, then copy the element (icon) and use it in your design.

Hope this helps :slight_smile: