6

I'm seeing SVG icons not rendering in a Spring '17 environment. I'm using custom SVG lightning component from SLDS framework. The icons in my component continue to display correctly in existing Winter 17 environment of platform, but when I test in Spring '17 all of the icons are not displayed.

When I checked icon path in browser console, i noticed all of the icons are having incorrect Path URL in the SVG URL elements. And I'm using documented way to set SVG Url:

{!$Resource.mynmsp__SLDS0202 + '/assets/icons/utility-sprite/svg/symbols.svg#search'}

The above SVG URL is evaluated correctly as:

/resource/1470228498000/mynmsp__SLDS0202/assets/icons/utility-sprite/svg/symbols.svg#search

But in Spring '17 pre-release orgs I'm seeing lots of Console Errors like this: Unsafe attempt to load URL

https://vc-prerelease-dev-ed--advpm.gus.visual.force.com/resource/1470228498000/mynmsp__SLDS0202/assets/icons/utility-sprite/svg/symbols.svg#search from frame with URL https://vc-prerelease-dev-ed.lightning.force.com/one/one.app#/n/mynmsp__My_Lightning_App?t=1484050965092. Domains, protocols and ports must match.

UPDATE: I'm experiencing similar issue in the Utility Bar, when I drop my custom lightning component into it. No svg icons are loaded, citing similar error message in browser console window (mentioned above).

Improve this question
2
  • I'm encountering this same issue in one of the orgs. In another org, the svg is displayed with larger padding on the right. Both on them are on spring 17. The symbols.svg is loaded sometimes and sometimes it is not loaded.
    – manjit5190
    Commented Jan 10, 2017 at 13:21
  • I'm experiecing similar issue in the Utility Bar, when I drop my custom lightning component into it. No svg icons are loaded, citing similar error in console window.
    – VarunC
    Commented Jan 10, 2017 at 13:28

2 Answers 2

Reset to default
1

As Doug Chasman answered here, there is currently a global issue with static resources in Spring '17. I guess you can create a case if you want to know more about when the fix is gonna be live.

Improve this answer
1
1

While this does not directly address your issue, it sidesteps it quite well:

Stop using custom SVG components - you don't need them anymore. Instead use the built in ones. Your icon can be replaced by this:

<lightning:icon iconName="utility:search" size="x-small" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default " />

The are three main attributes here - utility:search is the actual icon, while the size and class attributes can be worked out from the slds website. You should be able to copy the class from your SVG component directly to this component.

Make sure you set the size attribute to the same as specified in the class - in this case x-small.

Improve this answer
1
  • Thanks @Caspar, though I do know the base components, my lightning components (which have more than 1 currently) have compatibility issues with base components. Moreover couple of components I have built refer custom svg map from static resources and those cannot be referenced in base Icon component. And it is comprehensive task to update all my code to use base components instead of static resource ones :-), though wherever possible I'm now using base components, but even if one image cannot be rendered make the component unusable for end users, that's my worry :-)
    – VarunC
    Commented Jan 10, 2017 at 17:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .