I’m trying to change the color of the svg by passing the color attribute. In my case to black. The result is as on the screenshot below:
I’m using React and have my custom Icon components which accepts SVG attribute props, such as color. As you can see the icon is not completely in black. There are just a few of my icons behave like this.
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g>
<title>Layer 1</title>
<path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
<path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="#CED4DA"
d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
<path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m12.6666,18l1.3334,0"/>
<path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m18,18l1.3333,0"/>
<path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m11.3334,20.6667l0,1.3333"/>
<path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m20.6666,20.6667l0,1.3333"/>
<path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
<path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m4.66663,8.66666l1.33333,0"/>
<path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m10,8.66666l1.3333,0"/>
<path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m3.33337,11.3333l0,1.3333"/>
<path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m12.6666,11.3333l0,1.3333"/>
<path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
</g>
</svg>>Solution :
I can’t reproduce the output as in the screenshot, but your <path>s have their own stroke="#CED4DA" attributes, so they won’t inherit their stroke color from the svg. You can try to change them to stroke="currentColor". Then the "color" attribute of the svg will affect all those paths.
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" color="black">
<g>
<title>Layer 1</title>
<path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
<path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor"
d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
<path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m12.6666,18l1.3334,0"/>
<path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m18,18l1.3333,0"/>
<path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m11.3334,20.6667l0,1.3333"/>
<path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m20.6666,20.6667l0,1.3333"/>
<path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
<path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m4.66663,8.66666l1.33333,0"/>
<path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m10,8.66666l1.3333,0"/>
<path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m3.33337,11.3333l0,1.3333"/>
<path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m12.6666,11.3333l0,1.3333"/>
<path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
</g>
</svg>