Fillable SVG

[Obin]

SVG files should not use internal fill rule for coloring things, because then CSS rule fill cannot be easily applied.

For example App regular icon oryginal:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ic_fluent_apps_24_regular" fill="#212121" fill-rule="nonzero">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

App regular icon fillable by CSS fill:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons">
        <g id="ic_fluent_apps_24_regular">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

But if you really need to stay with default color, then use fill on SVG element directly whith can be overriden by CSS fill:

<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#000" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons">
        <g id="ic_fluent_apps_24_regular">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

[jasoncuster]

Heyo @Obin Thanks for letting us know. We are in the process of updating our repo to reflect this change (as there didn't seem to be any way to fix it in Figma). We're hoping to test it next week, so hopefully the library will reflect those changes in the short term. Thanks for your patience.

[ScottAwesome]

@jasoncuster Did this ever get pushed up as a change?

I think the week passed 😆 (I mean that in jest in case it wasn't obvious by context).

[spencer-nelson]

@ScottAwesome Apologies for the delay. We have a solution tested and ready but where it's a change that hits all of the files at once are hoping to batch it in with another couple of full-library technical fixes which require a designer to run through the effect with a fine tooth comb. Our goal is to complete all these in December. Do you have a more urgent need for the change than that?

[ScottAwesome]

@ScottAwesome Apologies for the delay. We have a solution tested and ready but where it's a change that hits all of the files at once are hoping to batch it in with another couple of full-library technical fixes which require a designer to run through the effect with a fine tooth comb. Our goal is to complete all these in December. Do you have a more urgent need for the change than that?

@spencer-nelson I appreciate the response! No I don't have a more urgent need than that at this time, I really look forward to seeing that work though! Is there any timeline for release in December for this?

[spencer-nelson]

With the publishing of the @fluentui/svg-icons package in npm this was resolved by removing all fill data from the processed svgs. We suggest setting that as a dependency for fillable SVGs.