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?

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?

• child-theme
• icon
• svg

Share Improve this question asked Apr 26, 2020 at 7:56 leemonleemon 2,03244 gold badges2525 silver badges5151 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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' );