Can I change the color of SVG fill or stroke?

194 Views Asked by At

I'm developing a Wordpress template with some social media icons in the footer. I have some SVG's for the icons, but I want to be able to change the color of that SVG through my theme options page (from Redux Framework). I know I can create a field for the color, but I need to specifically change the fill or stroke in the icons. Is there a way to do so?

I want to create something like this, but this doesn't seem to work with things like 'stroke' and 'fill'.

Redux::setSection( $opt_name, array(
    'title'      => 'icons',
    'id'         => 'social-icons',
    'subsection' => true,
    'fields'     => array(
        array(
            'id'       => 'facebook-icon-color',
            'type'     => 'color',
            'title'    => 'facebook-icon color', 
            'default'  => '#000000',
            'transparent' => false,
            'output' => array(
                'fill' => '.facebook-icon > svg > g',
            ),
            'validate' => 'color',
        ),
    ),
) );
1

There are 1 best solutions below

0
aleks.ko On

<path style="fill: yourcolor">