I know this has been asked a lot and with revamped extended IE 11
support for Lightning by Salesforce, the issue with SVG icons in Lightning Component
arise again. I've been through the forum questions again and nothing seems to work in IE 11
when it comes to a Custom SVG icons referenced from a Static Resource.
I have tried svg4everybody
, even though I'm not sure if it works with Locker Service
or not, but it has not generated the icons for me from SVG <use>
tag href values.
I've a custom SVG icon file in a Static resource, and I use the custom SVG helper component to place my SVG icon in the markup.
svg.cmp
Lightning Component:
<aura:component access="global">
<aura:attribute name="class" type="String" description="CSS classname for the SVG element" access="global" />
<aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" access="global" />
<aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" access="global" />
</aura:component>
svg.com Renderer
:
({
render: function(component, helper) {
//grab attributes from the component markup
var classname = component.get("v.class");
var xlinkHref = component.get("v.xlinkHref");
var ariaHidden = component.get("v.ariaHidden");
//return an svg element w/ the attributes
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('class', classname);
svg.setAttribute('aria-hidden', ariaHidden);
// Add an "href" attribute (using the "xlink" namespace)
var shape = document.createElementNS("http://www.w3.org/2000/svg", "use");
shape.setAttributeNS("http://www.w3.org/1999/xlink", "href", xlinkHref);
svg.appendChild(shape);
return svg;
}
})
Now, this helper Component injects <svg>
into Lightning Component markup dynamically, and also injects <use>
tag with path to svg icon. But it seems IE 11 does not support <use>
tags.
Can anyone suggest how to rectify this issue?
I'm trying to call my custom SVG icon like this:
<c:svg class="slds-button__icon" xlinkHref="{!$Resource.custom_utility_icons + '/svg/media_logo.svg#logo1'}" />