Alternate between two elements in an infinite loop in framer-motion

I have an animation containing one svg element that rotates and then changes color during rotation. What I want is that, at the second rotation it fades out and a new svg image takes it's place and then the same happens in reverse. So, Imagine I have SvgA and SvgB, I want to make SvgA rotate, then wait, rotate again and when the rotation finishes SvgB should be at it's place to do exactly the same on an infinite loop.

Animations can happen infinitely using a transition, but that only applies to a single component. I think I could use AnimatePresence and AnimateSharedLayout to swap between the components, but I am unsure about how to "toggle" between them on an infinite loop.

Maybe I can use variants + animation controls and an infinite asynchronous loop to run them as long as the component exists, but I am not sure how to orchestrate it.

This is the animation that I have so far:

// primary and secondary are defined colors
  const animation = {
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 360, 360, 0],
    color: [primary, primary, secondary, secondary, primary],
  };

const transition = {
  duration: 2,
  ease: "easeInOut",
  times: [0, 0.2, 0.5, 0.8, 1],
  loop: Infinity,
  repeatDelay: 1,
};

      <motion.div animate={animation} transition={transition}>
        <IconA className={css.icon} />
      </motion.div>