Icon-Color does not overwrite svg color-code

  • Resolved nicmare

    (@nicmare)


    1 year, 1 month ago

    i exported a very simply shape from sketch and this is the code:

    View post on imgur.com
    View post on imgur.com

    seems your icon block does not recognize the rect fill attribute here. because when i set a custom “icon color” in block settings, nothing changes. i checked “Apply icon color to fill”. i can see your block adds the icon color as “color” attribute. so whats the best way to use it? should i add my custom css to apply the desired color? like “fill: currentColor;” to the rect element. or will there be an update to overwrite the fill attribute?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter nicmare

    (@nicmare)

    quick php fix for functions.php could be:

    function icon_block_color( $html, $block ) {
	
	if(!str_contains($block["blockName"],"icon-block")) return $html;
	if(!isset($block["attrs"]["iconColorValue"])) return $html;
	
	preg_match_all('/#(?:[0-9a-fA-F]{6})/', $html, $matches);
	
	if(isset($matches[0]) && count($matches[0])>0){
		foreach($matches[0] as $color){
			if(str_contains($block["attrs"]["iconColorValue"],$color))
				continue;
			$html = str_replace($color,$block["attrs"]["iconColorValue"],$html);
		}
	}
	return $html;
}
add_filter( "render_block", 'icon_block_color', 10, 2 );
    Thread Starter nicmare

    (@nicmare)

    another more elegant way through css which also applies to the gutenberg editor:

    .wp-block-outermost-icon-block {
    .icon-container.has-icon-color {
        rect[fill] {
            fill: currentColor;
        }
    }
}
    Plugin Author Nick Diego

    (@ndiego)

    Hi @nicmare,

    This actually the intended functionality. If the custom SVG contains fill values, those are respected. Given the number of tags that can exist in an SVG, accounting for all of them is not possible. And there are many times when a custom SVG contains multiple colors.

    That said, you can override this yourself with CSS as you indicated above.

    Best,
    Nick

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Icon-Color does not overwrite svg color-code’ is closed to new replies.