0

I have a visual force page where I am trying to use 2 svg images.

<apex:page lightningStylesheets="true" docType="html-5.0" title="My Configuration" standardController="My_Configuration__c"
    tabStyle="My_Configuration__c" extensions="MyFlowConfigurationController">

    <apex:outputPanel>
        <!-- Display area -->
        <apex:outputPanel id="DisplayWorkflowPageBlock">
            <apex:outputPanel rendered="{!isCreateMicroflowSectionRender}">
                <apex:form>
                    <apex:pageBlockmode="edit">
                        <apex:outputpanel>
                            <apex:pageBlockSection>
                                <!-- image one -->
                                <apex:image url="{!$Resource.delete}" width="52" height="52" />
                                <!-- <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                    xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#delete">
                                </use> -->
                            </apex:pageBlockSection>
                        </apex:outputpanel>
                    </apex:pageBlock>
                </apex:form>
            </apex:outputPanel>

            <span style="float:center; font-size:16px;">
                <div style="text-align:center;">
                    <!-- image two -->
                    <apex:image url="{!$Resource.noConfig}" width="250px" height="250px" />
                </div>0
            </span>   
        </apex:outputPanel>
    </apex:outputPanel>
    
</apex:page>

I have both the svg images as static resources. The second image referred as "Resource.noConfig" renders fine but the first one referred as "Resource.delete" doesn't render either in the visualforce page or even on directly opening through browsers. The second one is a utility (delete) icon downloaded from LWC page - https://www.lightningdesignsystem.com/icons/#utility.

This is the code for the delete svg file which is not opening anywhere -

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     width="52px" height="52px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M45.5,10H33V6c0-2.2-1.8-4-4-4h-6c-2.2,0-4,1.8-4,4v4H6.5C5.7,10,5,10.7,5,11.5v3C5,15.3,5.7,16,6.5,16h39
        c0.8,0,1.5-0.7,1.5-1.5v-3C47,10.7,46.3,10,45.5,10z M23,7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v3h-6V7z"/>
    <path fill="#FFFFFF" d="M41.5,20h-31C9.7,20,9,20.7,9,21.5V45c0,2.8,2.2,5,5,5h24c2.8,0,5-2.2,5-5V21.5C43,20.7,42.3,20,41.5,20z
         M23,42c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1V28c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1V42z M33,42c0,0.6-0.4,1-1,1h-2
        c-0.6,0-1-0.4-1-1V28c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1V42z"/>
</g>
</svg>

Can anyone please point out why the first svg icon doesn't render anywhere ?

Improve this question

1 Answer 1

Reset to default
1

You don't have to upload the svg files as static resources. Include <apex:slds /> in a Visualforce page to use Lightning Design System stylesheets in the page as explained in the documentation.

Please refer to this link on how to Use SLDS Icons in Visualforce

This below example displays utility delete icon inside an VF Page.

<apex:page showHeader="false" applyHtmlTag="true" applyBodyTag="false">
    <head>
        <apex:slds />
    </head>
    <body class="slds-scope" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Your SLDS-styled content -->
        <span class="slds-icon_container slds-icon-utility-delete" title="Description of icon when needed">
            <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
                <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#delete')}"></use>
            </svg>
            <span class="slds-assistive-text">Description of icon when needed</span>
        </span>
    </body>
</apex:page>
Improve this answer
1
  • Thanks a lot, this works. One issue is that it is messing up the existing css styles used in the pages. Is there a way to control that ?
    – Knight of the Vale
    Commented Sep 18, 2022 at 15:28

You must log in to answer this question.

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