2

An working SVG icon stored in a public static resource myicon_svg

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g id="requiredId"><path fill="#fff" d="m54.3 74.1c-2.4 2.5-6.3 2.5-8.7 0-7.2-7.7-21-22.4-21-22.5-6.2-6.5-6.2-17.2 0-23.7 3-3.2 7-4.9 11.3-4.9 4.3 0 8.3 1.7 11.3 4.9l1.2 1.5c0.8 1 2.4 1 3.2 0l1-1.3 0.2-0.2c3.1-3.3 7.1-5 11.3-5 4.3 0 8.3 1.7 11.3 4.9 6.2 6.5 6.2 17.2 0 23.7-0.1 0.2-13.8 14.9-21.1 22.6z"></path></g></svg>

embedded in an Aura component (with id according to this question)

<aura:component ..>
   <div class="slds-section slds-is-open">
     <h3 class="slds-section__title slds-theme_shade slds-p-around_small">
     <lightning:icon src="{! $Resource.myicon_svg + '#requiredId' }" />

doesn't display in the icon div but way outside the visble bounding box as this screenshot shows:

enter image description here

Why?!

  • 1
    It looks like something's wrong with SLDS? Can you include some of the surrounding code for context? – sfdcfox May 14 at 17:46
  • I added some elements and checked that there is no css involved. – Robert Sösemann May 14 at 18:53
3

I got this to work. Your SVG should look more like the following:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
    <symbol viewBox="0 0 100 100" id="requiredId">
        <path fill="#f44" d="m54.3 74.1c-2.4 2.5-6.3 2.5-8.7 0-7.2-7.7-21-22.4-21-22.5-6.2-6.5-6.2-17.2 0-23.7 3-3.2 7-4.9 11.3-4.9 4.3 0 
                             8.3 1.7 11.3 4.9l1.2 1.5c0.8 1 2.4 1 3.2 0l1-1.3 0.2-0.2c3.1-3.3 7.1-5 11.3-5 4.3 0 8.3 1.7 11.3 4.9 6.2 6.5 6.2 
                             17.2 0 23.7-0.1 0.2-13.8 14.9-21.1 22.6z">
        </path>
    </symbol>
</svg>

This was shamelessly borrowed from the SLDS SVG image asset resource (from this SVG file on https://lightningdesignsystem.com).

The demo for this code is as follows:

<aura:application extends="force:slds">   
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade slds-p-around_small">
            <lightning:icon src="{!$Resource.myicon_svg+'#requiredId'}" class="red-border-for-demo" />
        </h3>
    </div>
</aura:application>

(Red border added to demonstrate bounding box.)

Output:

I ❤ This SVG

It also appears to work with the size attribute for automatic resizing, etc.

-2

Add a style in order to fill svg image with the desired color.

.THIS lightning-icon.some-indicator > lightning-primitive-icon > svg > use{
    fill: green;
}

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.