SVG styles override each other

[Andrew Gerard]

If I have a few SVGs I want to use on the same view, the styles from the last svg will override the others.

If the SVG files look something like this:
(actual svgs I'm using are much more complicated, these are just to demonstrated the issue)

// logo_one.svg
<svg viewBox="0 0 24 24">
    <style>.a{fill:#FF0000;}</style>
    <circle class='a' cx="12" cy="12" r="12"/>
</svg>

// logo_two.svg
<svg viewBox="0 0 24 24">
    <style>.a{fill:#00FF00;}</style>
    <circle class='a' cx="12" cy="12" r="12"/>
</svg>

// logo_three.svg
<svg viewBox="0 0 24 24">
    <style>.a{fill:#0000FF;}</style>
    <circle class='a' cx="12" cy="12" r="12"/>
</svg>

and if I use them into my react app like this:

import InlineSVG from 'svg-inline-react';

function SomeComponent() {
    return (
        <div>
            <InlineSVG src={require('svg-inline!./logo_one.svg')} />
            <InlineSVG src={require('svg-inline!./logo_two.svg')} />
            <InlineSVG src={require('svg-inline!./logo_three.svg')} />
        </div>
    )
}

then all SVGs end up rendering with same color because style class .a gets overridden by the last.

Is there a known solution for this using inline SVGs with this loader?
Would it be possible to add a prefix or something to style classes on loading?