JezK
Edit File: svg-painter.js
/** * Attempt to re-color SVG icons used in the admin menu or the toolbar * * @output wp-admin/js/svg-painter.js */ window.wp = window.wp || {}; wp.svgPainter = ( function( $, window, document, undefined ) { 'use strict'; var selector, painter, colorscheme = {}, elements = []; $( function() { wp.svgPainter.init(); }); return { init: function() { painter = this; selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' ); painter.setColors(); painter.findElements(); painter.paint(); }, setColors: function( colors ) { if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) { colors = window._wpColorScheme; } if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) { colorscheme = colors.icons; } }, findElements: function() { selector.each( function() { var $this = $(this), bgImage = $this.css( 'background-image' ); if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) { elements.push( $this ); } }); }, paint: function() { // Loop through all elements. $.each( elements, function( index, $element ) { var $menuitem = $element.parent().parent(); if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) { // Paint icon in 'current' color. painter.paintElement( $element, 'current' ); } else { // Paint icon in base color. painter.paintElement( $element, 'base' ); // Set hover callbacks. $menuitem.on( 'mouseenter', function() { painter.paintElement( $element, 'focus' ); } ).on( 'mouseleave', function() { // Match the delay from hoverIntent. window.setTimeout( function() { painter.paintElement( $element, 'base' ); }, 100 ); } ); } }); }, paintElement: function( $element, colorType ) { var xml, encoded, color; if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) { return; } color = colorscheme[ colorType ]; // Only accept hex colors: #101 or #101010. if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) { return; } xml = $element.data( 'wp-ui-svg-' + color ); if ( xml === 'none' ) { return; } if ( ! xml ) { encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ ); if ( ! encoded || ! encoded[1] ) { $element.data( 'wp-ui-svg-' + color, 'none' ); return; } try { xml = window.atob( encoded[1] ); } catch ( error ) {} if ( xml ) { // Replace `fill` attributes. xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"'); // Replace `style` attributes. xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"'); // Replace `fill` properties in `<style>` tags. xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';'); xml = window.btoa( xml ); $element.data( 'wp-ui-svg-' + color, xml ); } else { $element.data( 'wp-ui-svg-' + color, 'none' ); return; } } $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' ); } }; })( jQuery, window, document );