I would like to suggest creating an SVG component, I noticed that I can import an SVG file into the BSS images, so it would be a lot easier to use that file if there was a component working together with it.
I can use it normally with custom code, but a component would greatly enrich the BSS.
Using an SVG map, image attached, we could just point through the component the SVG that we would like to use in a certain location on the site.
To use the component with the SVG map we would need the following fields, according to the code below.
<svg class="icon icon-preview" fill="currentColor"> <use xlink:href="assets/img/icons-3.3.1.svg#preview" /> </svg>
Here is an example of an SVG map.
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 24 24" fill="currentColor" id="facebook" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/> </symbol> <symbol viewBox="0 0 24 24" fill="currentColor" id="search" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M19.023,16.977c-0.513-0.488-1.004-0.997-1.367-1.384c-0.372-0.378-0.596-0.653-0.596-0.653l-2.8-1.337 C15.34,12.37,16,10.763,16,9c0-3.859-3.14-7-7-7S2,5.141,2,9s3.14,7,7,7c1.763,0,3.37-0.66,4.603-1.739l1.337,2.8 c0,0,0.275,0.224,0.653,0.596c0.387,0.363,0.896,0.854,1.384,1.367c0.494,0.506,0.988,1.012,1.358,1.392 c0.362,0.388,0.604,0.646,0.604,0.646l2.121-2.121c0,0-0.258-0.242-0.646-0.604C20.035,17.965,19.529,17.471,19.023,16.977z M9,14 c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S11.757,14,9,14z"/> </symbol> </svg>
Note that I was able to import this entire map into the BSS images.
The end result is this, but the BSS does not display the SVGs in the development of the site, only in the presentation of the pages.