Enhancement/2468 svg replacing images

.storybook/preview-head.html

@@ -26,16 +26,8 @@
 		s.parentNode.insertBefore( wf, s );
 	} )();
 
-	const allImagesLoaded = new Promise( ( resolve ) => {
-		// Wait for the document to completely finish loading before checking for images.
-		window.addEventListener( 'load', () => {
-			imagesLoaded( '.googlesitekit-plugin-preview', { background: true }, resolve );
-		} );
-	} );
-
 	Promise.all( [
 		webFontsLoaded,
-		allImagesLoaded,
 	] ).then( () => {
 		// Signal Backstop that the environment is ready to go.
 		document.body.classList.add( 'backstopjs-ready' );

assets/js/components/Alert.js

@@ -32,6 +32,7 @@ import { Component, Fragment } from '@wordpress/element';
  */
 import data, { TYPE_MODULES } from './data';
 import Notification from './legacy-notifications/notification';
+import SunSmallSVG from '../../svg/sun-small.svg';
 
 class Alert extends Component {
 	constructor( props ) {
@@ -82,6 +83,7 @@ class Alert extends Component {
 				key={ item.id }
 				title={ item.title }
 				description={ item.message || item.description }
+				WinImageSVG={ SunSmallSVG }
 				dismiss={ __( 'Dismiss', 'google-site-kit' ) }
 				isDismissable={ item.isDismissible }
 				format="small"

assets/js/components/legacy-notifications/dashboard-modules-alerts.js

@@ -74,7 +74,7 @@ class DashboardModulesAlerts extends Component {
 						title={ notification.title || '' }
 						description={ notification.description || '' }
 						blockData={ notification.blockData || [] }
-						winImage={ notification.winImage ? `${ global._googlesitekitLegacyData.admin.assetsRoot }images/${ notification.winImage }` : '' }
+						WinImageSVG={ notification.WinImageSVG }
 						format={ notification.format || 'small' }
 						learnMoreURL={ notification.learnMoreURL || '' }
 						learnMoreDescription={ notification.learnMoreDescription || '' }

assets/js/components/legacy-notifications/dashboard-setup-alerts.js

@@ -29,7 +29,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { getQueryParameter, getModulesData } from '../../util';
 import Notification from './notification';
 import ModulesList from '../ModulesList';
-import rocketImage from '../../../images/rocket.png';
+import RocketImageSVG from '../../../svg/rocket.svg';
 import UserInputSuccessNotification from '../notifications/UserInputSuccessNotification';
 
 class DashboardSetupAlerts extends Component {
@@ -82,7 +82,7 @@ class DashboardSetupAlerts extends Component {
 							title={ sprintf( __( 'Congrats on completing the setup for %s!', 'google-site-kit' ), winData.setupTitle ) }
 							description={ winData.description }
 							handleDismiss={ () => {} }
-							winImage={ global._googlesitekitLegacyData.admin.assetsRoot + rocketImage }
+							WinImageSVG={ RocketImageSVG }
 							dismiss={ __( 'OK, Got it!', 'google-site-kit' ) }
 							format="large"
 							type="win-success"

assets/js/components/legacy-notifications/notification.js

@@ -132,10 +132,8 @@ class Notification extends Component {
 			title,
 			description,
 			blockData,
-			winImage,
 			WinImageSVG,
 			SmallImageSVG,
-			smallImage,
 			format,
 			learnMoreURL,
 			learnMoreDescription,
@@ -302,12 +300,11 @@ class Notification extends Component {
 							</div>
 						}
 
-						{ ( smallImage || SmallImageSVG ) &&
+						{ SmallImageSVG &&
 							<div className="
 								mdc-layout-grid__cell
 								mdc-layout-grid__cell--span-1
 							">
-								{ smallImage && <img className="googlesitekit-publisher-win__small-image" alt="" src={ smallImage } /> }
 								{ SmallImageSVG && <SmallImageSVG /> }
 							</div>
 						}
@@ -352,7 +349,7 @@ class Notification extends Component {
 
 						</div>
 
-						{ ( winImage || WinImageSVG ) &&
+						{ WinImageSVG &&
 							<div className="
 								mdc-layout-grid__cell
 								mdc-layout-grid__cell--order-1-phone
@@ -361,7 +358,6 @@ class Notification extends Component {
 								mdc-layout-grid__cell--span-4-desktop
 							">
 								<div className="googlesitekit-publisher-win__image-large">
-									{ winImage && <img alt="" src={ winImage } /> }
 									{ WinImageSVG && <WinImageSVG /> }
 								</div>
 							</div>
@@ -394,9 +390,7 @@ Notification.propTypes = {
 	learnMoreDescription: PropTypes.string,
 	learnMoreLabel: PropTypes.string,
 	blockData: PropTypes.array,
-	winImage: PropTypes.string,
 	WinImageSVG: PropTypes.elementType,
-	smallImage: PropTypes.string,
 	SmallImageSVG: PropTypes.elementType,
 	format: PropTypes.string,
 	ctaLink: PropTypes.string,

assets/js/components/settings/SettingsModules.js

@@ -36,7 +36,7 @@ import Notification from '../legacy-notifications/notification';
 import SettingsModule from './settings-module';
 import SettingsOverlay from './SettingsOverlay';
 import { isPermissionScopeError } from '../../util/errors';
-import thumbsUpImage from '../../../images/thumbs-up.png';
+import ThumbsUpSVG from '../../../svg/thumbs-up.svg';
 
 class SettingsModules extends Component {
 	constructor( props ) {
@@ -288,7 +288,7 @@ class SettingsModules extends Component {
 							title={ __( 'Congrats, you’ve connected all services!', 'google-site-kit' ) }
 							description={ __( 'We’re working on adding new services to Site Kit by Google all the time, so please check back in the future.', 'google-site-kit' ) }
 							format="small"
-							smallImage={ global._googlesitekitLegacyData.admin.assetsRoot + thumbsUpImage }
+							SmallImageSVG={ ThumbsUpSVG }
 							type="win-success"
 						/>
 					</div>

assets/js/googlesitekit-base.js

@@ -26,9 +26,6 @@ import {
 	clearWebStorage,
 } from './util/standalone';
 
-// Load image for the parent menu item.
-import '../images/logo-g_white_small.png';
-
 if ( 'toplevel_page_googlesitekit-dashboard' !== global.pagenow && 'site-kit_page_googlesitekit-splash' !== global.pagenow && 'admin_page_googlesitekit-splash' !== global.pagenow && global.localStorage ) {
 	// The total notifications count should always rely on local storage
 	// directly for external availability.