Fix the asset of the google-photos-picker-button

projects/js-packages/shared-extension-utils/src/external-media/sources/google-photos/google-photos-picker-button.js

@@ -2,7 +2,7 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import React, { useEffect } from 'react';
-import mediaImage from '../../../images/media.svg';
+import { GooglePhotosMediaIcon } from '../../../icons';
 import GooglePhotosAccount from './google-photos-account';
 
 /**
@@ -28,12 +28,7 @@ export default function GooglePhotosPickerButton( props ) {
 
 	return (
 		<div className="jetpack-external-media__google-photos-picker">
-			<img
-				src={ mediaImage }
-				width="150"
-				alt={ __( 'Google Photos', 'jetpack-shared-extension-utils' ) }
-			/>
-
+			<GooglePhotosMediaIcon width="150" />
 			<h1>{ __( 'Google Photos', 'jetpack-shared-extension-utils' ) }</h1>
 			<p>
 				{ __(

projects/js-packages/shared-extension-utils/src/icons.js

@@ -1,6 +1,7 @@
 import colorStudio from '@automattic/color-studio';
-import { G, Path, Polygon, Rect, SVG } from '@wordpress/components';
+import { G, Path, Polygon, Rect, SVG, Circle } from '@wordpress/components';
 import clsx from 'clsx';
+import React from 'react';
 import { getIconColor } from './block-icons';
 
 import './icons.scss';
@@ -45,6 +46,38 @@ export const GooglePhotosIcon = props => (
 	</SVG>
 );
 
+export const GooglePhotosMediaIcon = props => (
+	<SVG
+		viewBox="0 0 160 160"
+		enableBackground="new 0 0 160 160"
+		xmlns="http://www.w3.org/2000/svg"
+		{ ...props }
+	>
+		<Path d="M25.7 133.8c10.4-.3 20.8-.5 31.2-.6l31.2-.4s20.8-.1 31.2-.1l31.2-.1-1.4 1.4-.3-13.3c-.1-4.4-.3-8.9-.1-13.3v-26.9l.1-53.5 1.3 1.3-62.2-.3-31.1-.3-31.1-.3.6-.6-.1 9.4c0 .3-.2.5-.5.5s-.5-.2-.5-.5l-.1-9.4c0-.3.2-.6.6-.6h.1l31.1-.2h30.9l62.1-.3c.7 0 1.3.6 1.3 1.3l.1 53.5v26.8c0 8.9.3 17.9.4 26.8 0 .8-.6 1.4-1.4 1.4l-31.2-.1c-10.4 0-20.8 0-31.2-.1-10.4-.1-20.8-.1-31.2-.4l-31.2-.6c-.1 0-.2-.1-.3-.3.2-.1.4-.1.5-.2zm1-60.7v-2.4c0-1.6-.1-3.3-.5-4.9 0-.2-.1-.3-.3-.4h-.5c-.1.1-.2.2-.2.3-.4 1.6-.5 3.2-.5 4.9-.1 1.7-.1 3.2-.1 4.9 0 .8 0 1.6.1 2.4.1 2.3.1 4.8.4 7.1 0 .3.3.6.6.6s.5-.2.6-.5c.3-2.3.5-4.5.4-6.8 0-.9 0-1.8.1-2.7l-.1-2.5z" />
+		<path
+			className="st1"
+			d="M17.2 121.2h122s-4.6-28.1-19.1-32.1c-12.8-3.5-17.9 4.3-28.5 4.3-8.5 0-11.8-20-28-20-30.7-.2-46.4 47.8-46.4 47.8z"
+			fill="#a7aaad"
+		/>
+		<Circle
+			cx="116.8"
+			cy="58.9"
+			r="10.9"
+			fill="#none"
+			stroke="a7aaad"
+			strokeWidth="1.2679"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeDasharray="6.3396,6.3396"
+		/>
+		<Path
+			class="st0"
+			d="M7.3 57.8l6.3-.1c.3 0 .5.2.5.5s-.2.5-.5.5l-6.3-.1c-.2 0-.4-.2-.4-.4-.1-.3.1-.4.4-.4zm9.6-3.1c.6-2.1 1.6-4 2.8-5.8.1-.3.5-.3.8-.1.3.1.3.5.1.8-1.2 1.7-2.1 3.6-2.7 5.6-.1.2-.4.4-.6.4-.4-.4-.5-.6-.4-.9zm7.9-10c1-.4 2.2-.6 3.3-.5 1.1 0 2.2.2 3.3.6.3.1.5.5.4.8-.1.3-.5.5-.8.4-1.8-.7-3.9-.8-5.7-.1-.3.1-.6 0-.7-.3v-.1c-.3-.4-.1-.7.2-.8zm10.9 4.7c.3.2.6.2.9.1.5-.3 1-.5 1.5-.6 1.1-.3 2.2-.4 3.3-.4.4 0 .6.3.6.6 0 .4-.3.6-.6.6-1 0-2 .1-2.9.4-.5.2-1 .4-1.4.6-.7.3-1.5.3-2.2-.1-.3-.3-.3-.8 0-1.1.2-.1.5-.2.8-.1zm11.6 2c.6 1 1 2 1.1 3.2.2 1.1.2 2.2.1 3.3 0 .3-.3.5-.6.5s-.5-.2-.5-.5c.2-2-.3-4.1-1.3-5.8-.1-.3-.1-.6.1-.8.4-.2 1-.2 1.1.1zm6.8 6.3h4.7c.2 0 .4.2.4.4s-.1.4-.3.4h-4.8c-.3 0-.5-.2-.5-.5.1 0 .2-.3.5-.3z"
+			fill="#a7aaad"
+		/>
+	</SVG>
+);
+
 export const OpenverseIcon = props => (
 	<SVG
 		style={ {