2

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?

  • Hey, were you able to do it in lwc? I am stuck on a similar situation. – Ashish Sharma Jan 17 at 8:53
0

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;
} 
|improve this answer|||||

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.