@gravityforms/components/react/admin/elements/Svgs/GoogleAltLogo/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes } from '@gravityforms/libraries';

const { forwardRef } = React;

/**
 * @module GoogleAltLogo
 * @description The Google alt logo.
 *
 * @since 4.3.1
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the logo.
 * @param {string}      props.title  The title of the logo.
 * @param {number}      props.width  The width of the logo.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import GoogleAltLogo from '@gravityforms/components/react/admin/elements/Svgs/GoogleAltLogo';
 *
 * return (
 *    <GoogleAltLogo height={ 24 } width={ 24 } />
 * );
 *
 */
const GoogleAltLogo = forwardRef( ( {
	height = 24,
	title = '',
	width = 24,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 24 24" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fill="#4285F4" fillRule="evenodd" d="M20.208 12.194a9.82 9.82 0 0 0-.155-1.749H12v3.308h4.602a3.933 3.933 0 0 1-1.707 2.58v2.146h2.764c1.616-1.489 2.549-3.68 2.549-6.285Z" clipRule="evenodd" />
			<path fill="#34A853" fillRule="evenodd" d="M12 20.55c2.309 0 4.244-.766 5.659-2.072l-2.764-2.145c-.765.513-1.745.816-2.895.816-2.227 0-4.112-1.504-4.784-3.525H4.359v2.216A8.547 8.547 0 0 0 12 20.55Z" clipRule="evenodd" />
			<path fill="#FBBC05" fillRule="evenodd" d="M7.216 13.624A5.14 5.14 0 0 1 6.948 12c0-.563.097-1.111.268-1.624V8.16H4.359A8.546 8.546 0 0 0 3.45 12c0 1.38.33 2.685.91 3.84l2.856-2.216Z" clipRule="evenodd" />
			<path fill="#EA4335" fillRule="evenodd" d="M12 6.85c1.255 0 2.382.432 3.268 1.28l2.453-2.453C16.24 4.297 14.305 3.45 12 3.45a8.547 8.547 0 0 0-7.64 4.71l2.856 2.216C7.888 8.355 9.773 6.85 12 6.85Z" clipRule="evenodd" />
		</svg>
	);
} );

GoogleAltLogo.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

GoogleAltLogo.displayName = 'Svgs/GoogleAltLogo';

export default GoogleAltLogo;