Deeply customize an external SVG's colors.

The external icons.svg file has paths that use overrideable CSS custom property fill styles. This allows for deeper customization than setting CSS rules that would otherwise apply globally to the use element.

HTML:

    <style>
        use {
        --sky:#324D5B;
        --ground:#475F6C;
        }
    </style>
    <svg width="100" height="100">
        <use xlink:href="icons.svg#signal"></use>
     </svg>
    
    <svg width="100" height="100">
        <use xlink:href="icons.svg#signal" style="--sky:blue;--ground:red;"></use>
     </svg>
    
     <svg width="100" height="100">
        <use xlink:href="icons.svg#signal" style="--sky:red;--ground:blue;"></use>
    </svg>