title: how to hover svg and text both at a time
body: <p>I imported a svg image and create a box containing icon and text.so when we want to hover on box all color changes to yellow color but svg is not changes how to resolve that if we hover on the box then text as well icon should change with yellow color, now I am getting this<a href="https://i.stack.imgur.com/Ww48n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ww48n.png" alt="enter image description here" /></a></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-css lang-css prettyprint-override"><code>.h:hover{
    color:yellow;
    fill:yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class='h' style={{border:'2px solid',height:'20px'}}&gt;&lt;img src="https://assets.codepen.io/3/kiwi.svg" class="icon"  width="15px"/&gt;&lt;span&gt;Text&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>