How to access style properties of externally insert svg file?

Question

Here I can access the style of the svg:

svg {
  fill: skyblue;
}

<svg viewBox="0 0 100 100" width="500px" height="500px"
    xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
    <path d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z"/>
</svg>

But its style is not changed when svg is added as external file:

img {
  fill: skyblue;
}
/* etc. Not working
    img > svg {
      fill: skyblue;
    }
*/

<img src="brackets.svg" width="500px" height="500px">

Or; Can I somehow use the css root variable in the svg file? e.g. <svg fill="var(--textColor)" > </svg>