title: Animate children when hover at parent with Framer-motion
body: <p>Using framer motion I want to animate my Icon component to rotate 90 degrees when hovering at the parent element which is a button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;motion.button type="button" whileHover={{scale: 1.1}}&gt;
      Visit our Industry 
      {/*Animate this Icon to rotate 90 degrees*/}
      &lt;Icon type="arrow-up" /&gt; 
  &lt;/motion.button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I saw the use of variants but not sure how to really use them with props like <code>whileHover</code>.</p>
  
  <p>Any help will be appreciated since this is a new thing.</p>