[SalesForce] Animate custom refresh lightning-button-icon LWC

I want animate a lightning-button-icon as the standard Salesforce refresh button in
LWC. I've already seen a related question but the answer was not conclusive, at this point I don't know if it's possible.

<lightning-button-icon  icon-name="utility:refresh" alternative-text="Refresh" class="slds-p-around_xx-small" onclick={refreshTable}></lightning-button-icon>

I've tried using the icon-class atribute but according to the documentation "Only Lightning Design System utility classes are currently supported with icon-class."

I was able to do it in the dev console by adding a breakpoint in refreshTable and edit a class I've created before,

.refreshRotate { animation: rotate .4s linear infinite; }

add " svg". This because if I create the class as "refreshRotate svg {" it doesn't affect the svg. I was then able to toggle it with

e.target.classList.toggle("refreshRotate");

I can't Access the DOM in JS either, other than query selector but since the svg it's not in the same namespace i can't access it.

Any suggestions?

Best Answer

I was able to do it using the markup of lightning-button-icon. I guess locker service is preventing me to access the svg inside this component so declare it as this.

LWC Markup

<button class="slds-button slds-button_icon slds-button_icon-border" title="Refresh" alternative-text="Refresh" onclick={refreshTimeline}>
    <svg class="slds-button__icon" aria-hidden="true">
        <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
    </svg>
</button>

LWC Controller

const buttonIcon = evt.target.querySelector('.slds-button__icon');
buttonIcon.classList.add('refreshRotate');
return refreshApex(this.wiredActivities)
    .then(() => {
        buttonIcon.classList.remove('refreshRotate');
    });

LWC CSS (rotate is an animation already created for lwc)

.refreshRotate {
    animation: rotate .4s;
}

Related Solutions

[SalesForce] Unable to use SVG in Lightning Components with LockerService activated

SVG support along with document.createElementNS() is coming very soon - already in a scheduled patch branch. I'll double check on the release date but I believe it deploys tommorow night. We've filled in many other gaps in the secure virtual DOM API with more on the way in following patches. Please pardon our dust as we get this dialed in over the next few weeks and definitely keep letting us know when you hit missing methods/properties.

[SalesForce] Visualforce and Lightning Componets: how to get the Lightning-Icon Name on a VF-Page (or LC) for any custom object

I came across something which could do the trick. But that's a bit ugly...

In fact, you can get the different tabs used in an app and each icon url related to theses tabs.

Finally, by checking if the tab is related to the sobject you're searching for, you're able to return the icon name by removing the other parts of the icon url.

Here's my class:

public class IconsUtil {
    private static final String LIGHTNING_ICON_EXT = '.svg';

    private Map<String, String> iconsNamesBySObjectNames;

    public IconsUtil(){
        this.iconsNamesBySObjectNames = new Map<String, String>();

        //we loop through each application
        for(Schema.DescribeTabSetResult tsr : Schema.describeTabs()) { 
            //that's the current selected application
            if(tsr.isSelected()){
                //we loop through each tab
                for(Schema.DescribeTabResult tabResult : tsr.getTabs()){
                    //there are different icons related to this tab. Some for the vf version, some for Lightning. And also depending on the icon size.
                    for(Schema.DescribeIconResult iconResult : tabResult.getIcons()){
                        String iconUrl = iconResult.getUrl();
                        if(iconUrl.endsWith(LIGHTNING_ICON_EXT)){
                            //Unfortunately, that's the whole url. So we extract the end without the extension
                            this.iconsNamesBySObjectNames.put(tabResult.getSobjectName(), iconUrl.substringAfterLast('/').substringBefore(LIGHTNING_ICON_EXT));
                            break;
                        }
                    }    
                }
                break;
            }
        }
    }

    public String getBySObjectName(String sobjectName){
        return this.iconsNamesBySObjectNames.get(sobjectName);
    }
}

Here's how to use it:

IconsUtil iconsUtil = new IconsUtil();
String iconName = iconsUtil.getBySObjectName('MyCustomObject__c');

Related Topic