How to change color icon using Lottie Animation

[rafael-fecha]

The same as other lottie packages like lottie react native supports colorFilters:

colorFilters={[
                    {
                        keypath: 'somekeypath',
                        color: 'someColor
                    },

I would like to know if it is possible to achieve color icon changing in this package.

Thanks !

[rafael-fecha]

@Gamote no updates here ?

[jonscottclark]

@rafael-fecha We send the Lottie container to styled-components, and set color of the child svg:

const StyledLottie = styled(Lottie)`
  svg,
  svg path {
    fill: currentColor; // we use `currentColor` to inherit from parent
    stroke: currentColor; // (or whatever colour value you want)
  }
`;
const LoadingAnimation = () => {
  return (
    <StyledLottie
      loop
      autoplay
      animationData={animationData}
    />
  );
};

Hope that helps.

[dentemm]

@jonscottclark that works, thanks! Can you also explain what the syntax would look like to change the color for a single path by name?

[dentemm]

@jonscottclark that works, thanks! Can you also explain what the syntax would look like to change the color for a single path by name?

After digging into the developer console I found a solution:

export const StyledLottie = styled(Lottie)`
  svg path[fill="rgb(205,160,111)"] { // or whatever color you have
    fill: hotpink;
  }
`;