0

The Twenty Nineteen theme uses inline SVG for its icons instead of icon fonts. The icons are added to the HTML code with the TwentyNineteen_SVG_Icons::get_svg() function.

public static function get_svg( $group, $icon, $size ) {
    if ( 'ui' == $group ) {
        $arr = self::$ui_icons;
    } elseif ( 'social' == $group ) {
        $arr = self::$social_icons;
    } else {
        $arr = array();
    }
    if ( array_key_exists( $icon, $arr ) ) {
        $repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size );
        $svg  = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
        $svg  = preg_replace( "/([\n\t]+)/", ' ', $svg ); // Remove newlines & tabs.
        $svg  = preg_replace( '/>\s*</', '><', $svg ); // Remove white space between SVG tags.
        return $svg;
    }
    return null;
}

When themes used icon fonts it was extremely easy to swap one icon for another with just a few lines of CSS code in a child theme. It seems that now with SVG icons one has to rewrite or override PHP functions just to add or swap one icon. Am I wrong? Is there an easy way to swap one SVG icon for another in a child theme of the Twenty Nineteen theme?

1 Answer 1

0

I see that both icon arrays ($ui_icons and $social_icons) in Twenty Nineteen can be accessed publicly, so I managed to replace any icon via the init hook in a child theme. An example:

function child_init() {
    TwentyNineteen_SVG_Icons::$social_icons['instagram'] = '<svg>... Insert new Instagram icon SVG code here ...</svg>';
}
add_action( 'init', 'child_init' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.