1

Is there a way to use SVG tags in lightning components? I would like to build and display about 6 SVG icons, but unable to use <svg> tag in the component. Is there any workaround for this?

  • I would imagine it's possible; the slds icons are svg's link – martin Aug 24 '18 at 5:18
  • But I'd like to use my own icons, something I built on my own. Could use it as a static resource, but I would set the icon color based on certain conditions. For this, I need the <svg> tags on the component. – yeselkay Aug 24 '18 at 5:22
1

One option here is to use a visualforce page to generate the svg, and use a query string parameter to set the color. Then you can include an img tag in your lightning component that references the visualforce page, and have the color set by a component attribute.

Circle.page

<apex:page 
 contentType="image/svg+xml"
 controller="Circle"
>

    <svg xmlns="http://www.w3.org/2000/svg"
     width="200" 
     height="200">

        <circle 
         cx="100" 
         cy="100" 
         r="50" 
         stroke="black"
         stroke-width="1" 
         fill="{! Color }" 
        />

    </svg>

</apex:page>

Circle.cls

public class Circle {

    private String Color ;

    public  String getColor(){
        return this.Color ;
    }

    public Circle(){
        Color = ApexPages.currentPage().getParameters().get('color');
    }

}

circle.cmp

<aura:component>

    <aura:attribute 
     name="color" 
     type="string"
     default="rgb(53,64,200)"
    />

    <img 
     src="{! 'https://analysis-dev-ed--analysis.ap7.visual.force.com/apex/Circle?color=' + v.color }" 
    />

</aura:component>

myApp.app

<aura:application >

    <c:Circle 
     color="blue" 
    />

    <c:Circle 
     color="red" 
    />

    <c:Circle 
     color="yellow" 
    />

    <c:Circle 
     color="green" 
    />

</aura:application>

And there you have a lightning component with an svg image where you can change the color based on component attribute values:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.