@gravityforms/components/react/admin/elements/Svgs/MicrosoftAltLogo/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 MicrosoftAltLogo
 * @description The Microsoft 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 MicrosoftAltLogo from '@gravityforms/components/react/admin/elements/Svgs/MicrosoftAltLogo';
 *
 * return (
 *    <MicrosoftAltLogo height={ 24 } width={ 24 } />
 * );
 *
 */
const MicrosoftAltLogo = 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> }
			<g clipPath="url(#a)">
				<path fill="#F1511B" d="M10.44 10.492H0V.052h10.44v10.44Z" />
				<path fill="#80CC28" d="M21.966 10.492h-10.44V.052h10.44v10.44Z" />
				<path fill="#00ADEF" d="M10.439 22.022H0V11.583h10.439v10.44Z" />
				<path fill="#FBBC09" d="M21.966 22.022h-10.44V11.583h10.44v10.44Z" />
			</g>
			<defs>
				<clipPath id="a">
					<path fill="#fff" d="M0 0h22v22.099H0z" />
				</clipPath>
			</defs>
		</svg>
	);
} );

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

MicrosoftAltLogo.displayName = 'Svgs/MicrosoftAltLogo';

export default MicrosoftAltLogo;