How to make SVG rotate 360° on click, like on chrome://settings?

Question

How can this be roleized with SVG? I would be very grateful if you could help, thank you.

HTML

<svg id="product-logo" on-click="onProductLogoClick_" width="27" height="27" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#fff"><path d="M5.225 10.265A6.996 6.996 0 0 1 12 5h9.733a11.976 11.976 0 0 0-19.512.061l3.004 5.204zM22.898 7h-6.003a6.979 6.979 0 0 1 1.162 8.498l.008.004-4.872 8.438A11.98 11.98 0 0 0 22.898 7zm-9.009 11.735A6.964 6.964 0 0 1 5.944 15.5l-.004.002-4.87-8.435a11.98 11.98 0 0 0 9.812 16.877l3.007-5.21z"></path><path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg>

JS

onProductLogoClick_() {
        this.$["product-logo"].animate({
            transform: ["none", "rotate(-10turn)"]
        }, {
            duration: 500,
            easing: "cubic-bezier(1, 0, 0, 1)"
        })
    }

Answer 1

It can be done in SVG only, with SMIL animation

For more fancy interaction see: https://codepen.io/mikemjharris/post/svg-toggling

<svg width="160" viewBox="0 0 240 240">
    <g fill="black">
        <path
            d="m52 103a70 70 90 0168-53h97a120 120 90 00-195 1l30 52zm177-33h-60a70 70 90 0112 85l0 0-49 84a120 120 90 0097-169zm-90 117a70 70 90 01-80-32l0 0-49-84a120 120 90 0098 169l30-52z" />
        <circle cx="120" cy="120" r="50" />
        <animateTransform attributeType="xml" attributeName="transform" 
            type="rotate" from="0 120 120" to="360 120 120"
            begin="click" dur="9s" repeatCount="indefinite" />
    </g>
</svg>