@gravityforms/components/react/admin/elements/Svgs/ZohoLogo/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 ZohoLogo
 * @description The Zoho logo.
 *
 * @since 2.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 ZohoLogo from '@gravityforms/components/react/admin/elements/Svgs/ZohoLogo';
 *
 * return (
 *    <ZohoLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const ZohoLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 92 92" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<rect width={ 92 } height={ 92 } y={ 0.043 } fill="#F1F1F1" rx={ 46 } />
			<path
				fill="#226DB4"
				d="M65.662 69H25.338A4.344 4.344 0 0 1 21 64.66V53.2a1.436 1.436 0 0 1 2.87 0v11.46c0 .806.657 1.464 1.464 1.464h40.323c.806 0 1.464-.658 1.464-1.464V40.342c0-.451-.202-.869-.557-1.147L46.412 23.193a1.457 1.457 0 0 0-1.824 0L24.427 39.19c-.35.278-.557.696-.557 1.147v4.917c0 .542.297 1.037.777 1.296L44.81 57.276c.432.23.945.23 1.377 0l12.992-6.924c.7-.374 1.57-.105 1.944.591.374.701.105 1.57-.59 1.945L47.54 59.81a4.314 4.314 0 0 1-4.075 0L23.304 49.085a4.325 4.325 0 0 1-2.3-3.831v-4.917c0-1.33.6-2.568 1.642-3.399l20.157-15.997A4.366 4.366 0 0 1 45.5 20c.974 0 1.934.336 2.697.941L68.36 36.943a4.315 4.315 0 0 1 1.641 3.4V64.66c-.005 2.39-1.948 4.34-4.338 4.34Z"
			/>
			<path
				fill="#F9B21D"
				d="M59.855 53.06a1.436 1.436 0 0 1-1.435-1.435v-7.816c0-.807-.658-1.465-1.464-1.465H34.044c-.806 0-1.463.658-1.463 1.465v1.637a1.436 1.436 0 0 1-2.87 0v-1.637c0-2.391 1.943-4.34 4.338-4.34h22.912a4.344 4.344 0 0 1 4.338 4.34v7.811a1.448 1.448 0 0 1-1.444 1.44Z"
			/>
		</svg>
	);
} );

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

ZohoLogo.displayName = 'Svgs/ZohoLogo';

export default ZohoLogo;