SVG component creation

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.

3 Likes

Interesting idea. Following this thread to see what others think.

4 Likes

+1. I need this functionality as well. It would also be nice to have ability to modify the svg fill and stroke colors.

1 Like

Hello @martin, without wanting to cause more work for the BSS team and not create controversy in the forum, this idea, suggestion that I made, could you think about it carefully and see if it’s possible?
Thanks for your attention as always.

Thank you for the suggestion! It looks to me that Custom Code would be a better fit instead of an SVG component. We just need to allow “use”, “symbol” and a few more SVG-specific tags and attributes to render in Custom Code in the app window, so the illustrations show up. Looking forward to your feedback on this idea.

1 Like

Yes it would be great, the custom code works very well with svg, the component would really be to facilitate.
One question, is there any way for us to create custom components, that we could use directly in the program, or just the custom code itself? Thanks for your attention again.

You can create any component into a Library item that you can reuse or share in the Online components. It will be available in all your projects as the component library is a global feature. Is that what you were asking?

If so, go to the component you want to save or share and select the outer most element of it so you have the entire coponent. Right click and choose save to library. It will then give you the option to include the CSS, JS and Images should you want to.

Yes I know.
I was suggesting creating a component for the developers, but accidentally, I have no idea how, I ended up creating something similar to what I was suggesting.
https://forum.bootstrapstudio.io/t/i-accidentally-ended-up-creating-an-icon-component-unlocked-that-uses-svg/9108?u=gilmar

1 Like

Oh haha gotta love accidents! :stuck_out_tongue:

1 Like