WordPress SVG spinner. No more spinner.gif!

spinner.js

/**
 * WordPress dependencies
 */
import { SVG, Circle } from '@wordpress/primitives';

const spinner = (
  <SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <Circle cx="18" cy="18" r="18" fill="#a2a2a2" />
    <Circle cx="18" cy="8" r="4" fill="#f1f1f1">
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 18 18"
        to="360 18 18"
        dur="1100ms"
        repeatCount="indefinite"
      />
    </Circle>
  </SVG>
);

export default spinner;

spinner.svg

<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="18" height="18">
  <circle cx="18" cy="18" r="18" fill="#a2a2a2" />
  <circle cx="18" cy="8" r="4" fill="#f1f1f1">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 18 18"
      to="360 18 18"
      dur="1100ms"
      repeatCount="indefinite"
    />
  </circle>
</svg>

usage.js

/**
 * WordPress dependencies
 */
import { Icon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import spinner from './spinner';

<Icon icon={spinner} />