Trouble getting svg icon in application

Hello,

I have this svg file.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 42.5">
<defs>
<style>
.cls-1 {
fill: #6a7178;
}
</style>
</defs>
<g id="Group_560" data-name="Group 560">
<path class="cls-1" d="M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z"/>
<path class="cls-1" d="M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z"/>
<path class="cls-1" d="M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z"/>
<path class="cls-1" d="M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z"/>
<path class="cls-1" d="M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z"/>
<path class="cls-1" d="M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z"/>
<path class="cls-1" d="M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z"/>
</g>
</svg>

This looks like:

I want this icon in my navigation bar without importing it to the "images" folder in outsystems? 

The icons already there are not svg and belong to outsystems itself

Does anyone have any advice on how i should be doing this?

Hi Daan v,


You need to add first <?xml version="1.0" encoding="UTF-8"?> in the beginning of the file so OutSystems can consume it.


You can then add it to Images like on the picture below and drag it to the screen:


Hope it helps.


Best regards,

João Marques

João Marques wrote:

Hi Daan v,


You need to add first <?xml version="1.0" encoding="UTF-8"?> in the beginning of the file so OutSystems can consume it.


Hope it helps.


Best regards,

João Marques

 

 Okay but where do i put the svg file or the svg code?

regards,

Daan

Hi Daan,


You created a text file on your computer with <?xml version="1.0" encoding="UTF-8"?> before the actual SVG and save it, for example "myimage.svg".

And then you can upload it on Service Studio and then use it like any other image.


Cheers,

João Marques

You can use Expression and set it's property to No then paste the given given code in the expression:

"<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.5 42.5'>

    <defs>

        <style>

            .cls-1 {

                fill: #6a7178;

            }


        </style>

    </defs>

    <g id='Group_560' data-name='Group 560'>

        <path class='cls-1' d='M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z' />

        <path class='cls-1' d='M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z' />

        <path class='cls-1' d='M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z' />

        <path class='cls-1' d='M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z' />

        <path class='cls-1' d='M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z' />

        <path class='cls-1' d='M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z' />

        <path class='cls-1' d='M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z' />

    </g>

</svg>

 "

That is not what i'm looking for. I want to be able to assign diffrent css classes this way i can edit "fill" and "background-color" and add on hover.

Add the below SVG in expression with escape content no:

"<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.5 42.5'>

    <g id='Group_560' class='cls-1' data-name='Group 560'>

        <path d='M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z' />

        <path d='M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z' />

        <path d='M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z' />

        <path d='M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z' />

        <path d='M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z' />

        <path d='M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z' />

        <path d='M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z' />

    </g>


</svg>

"


and add the below CSS at screen level:

I'm working on a reactive web app. I can't set the exspression Escape content to: "No", do you have an alternative or a fix?

Solution

Daan v wrote:

I'm working on a reactive web app. I can't set the expression Escape content to: "No", do you have an alternative or a fix?

 Hey, I thought that you are working on Traditional Web App. I tried with the different approach I hope it will solve your problem in the reactive web app. please refer to the oml

 https://akashdeep-mishra.outsystemscloud.com/Test/RequestManagement?_ts=637363894312820889 

Solution

That works, thank you!