Importé una imagen svg y creé un cuadro que contiene un ícono y texto. Entonces, cuando queremos pasar el mouse sobre el cuadro, todos los colores cambian a color amarillo, pero svg no cambia cómo resolver eso si pasamos el mouse sobre el cuadro, entonces el icono del texto también debería cambiar con color amarillo, ahora me sale esto 
.h:hover{ color:yellow; fill:yellow; } <span class='h' style={{border:'2px solid',height:'20px'}}><img src="https://assets.codepen.io/3/kiwi.svg" class="icon" width="15px"/><span>Text</span></span>Intente usar filtro en lugar de relleno. https://isotropic.co/tool/hex-color-to-css-filter/ Esto puede ayudar con la conversión de color.
Debería intentar cargar su svg directamente como un svg, y no como una imagen. De esa manera, puede acceder directamente a sus variables svg en su css.
.h:hover { color:yellow; fill:yellow; } .h:hover svg, .h:hover path { fill: yellow; } /* Depending on your svg, it is possible that you have to set the fill in the path, check your svg */¡Prueba si esto funciona!