@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
66 lines (60 loc) • 3.94 kB
JavaScript
import { React, PropTypes } from '@gravityforms/libraries';
const { forwardRef } = React;
/**
* @module ZohoFullLogo
* @description The Zoho full logo.
*
* @since 5.0.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 ZohoFullLogo from '@gravityforms/components/react/admin/elements/Svgs/ZohoFullLogo';
*
* return (
* <ZohoFullLogo height={ 44 } width={ 44 } />
* );
*
*/
const ZohoFullLogo = forwardRef( ( {
height = 42,
title = '',
width = 95,
}, ref ) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 95 42" fill="none" ref={ ref }>
{ title !== '' && <title>{ title }</title> }
<g clipPath="url(#a)">
<path
fill="#000"
d="M50.563 19.786h3.963l4.652 11.763 4.624-11.763h3.864v16.147h-2.88v-12.31l-5.088 12.31h-1.391l-4.919-12.31v12.31h-2.825V19.786ZM77.644 34.486c-.9 1.195-2.206 1.659-3.668 1.659-2.22 0-3.963-1.125-3.963-3.444 0-3.274 3.457-3.794 6.212-3.794h1.391v-.183c0-1.686-.394-2.754-2.305-2.754-1.152 0-2.206.59-2.628 1.686l-2.192-.941c.787-2.08 2.993-2.839 5.101-2.839 2.797 0 4.82 1.35 4.82 4.342v7.716H77.63v-1.448h.014Zm-1.447-3.836c-1.307 0-3.373.154-3.373 1.939 0 1.138.829 1.56 1.883 1.56 1.433 0 2.909-.745 2.909-2.347V30.65h-1.42ZM84.895 19.126c.914 0 1.645.674 1.645 1.616 0 .928-.703 1.602-1.63 1.602-.914 0-1.687-.688-1.687-1.616 0-.942.759-1.602 1.672-1.602Zm-1.419 5.017h2.825v11.79h-2.825v-11.79ZM89.575 19.337l2.825-1.223v17.82h-2.825V19.337ZM50.592 14.671l5.2-7.504h-4.666V5.691h7.11v.731l-5.072 7.505h4.918v1.475h-7.49v-.73ZM62.678 8.151c2.164 0 3.822 1.518 3.822 3.696 0 2.235-1.742 3.71-3.892 3.71-2.165 0-3.907-1.503-3.907-3.668 0-2.248 1.84-3.738 3.977-3.738Zm1.995 3.696c0-1.307-.66-2.403-2.066-2.403-1.433 0-2.01 1.139-2.01 2.445 0 1.265.675 2.333 2.053 2.333 1.433.014 2.023-1.124 2.023-2.375ZM67.75 5.073h1.701V9.43c.464-.886 1.392-1.28 2.375-1.28 1.7 0 2.558 1.195 2.558 2.812v4.454h-1.728V11.13c0-1.026-.535-1.588-1.518-1.588-1.096 0-1.7.675-1.7 1.687v4.173h-1.701V5.073h.014ZM79.457 8.151c2.164 0 3.823 1.518 3.823 3.696 0 2.235-1.743 3.71-3.893 3.71-2.164 0-3.907-1.503-3.907-3.668 0-2.248 1.841-3.738 3.977-3.738Zm1.996 3.696c0-1.307-.66-2.403-2.066-2.403-1.434 0-2.01 1.139-2.01 2.445 0 1.265.675 2.333 2.052 2.333 1.42.014 2.024-1.124 2.024-2.375Z"
/>
<path
fill="#F9B21D"
d="M33.081 27.91c-.66 0-1.194-.534-1.194-1.194v-6.493c0-.674-.549-1.223-1.223-1.223H11.608c-.675 0-1.223.549-1.223 1.223v1.363a1.193 1.193 0 1 1-2.389 0v-1.363a3.62 3.62 0 0 1 3.612-3.612h19.056a3.62 3.62 0 0 1 3.612 3.612v6.493c0 .66-.534 1.194-1.195 1.194Z"
/>
<path
fill="#226DB4"
d="M37.901 41.162H4.371a3.62 3.62 0 0 1-3.612-3.611v-9.529a1.194 1.194 0 1 1 2.389 0v9.529c0 .674.548 1.222 1.222 1.222h33.531c.675 0 1.223-.548 1.223-1.222V17.342c0-.38-.169-.717-.464-.956L21.895 3.078a1.225 1.225 0 0 0-1.518 0L3.612 16.386a1.192 1.192 0 0 0-.464.956v4.09c0 .45.253.857.646 1.082l16.766 8.923c.365.197.787.197 1.152 0l10.807-5.761a1.202 1.202 0 0 1 1.616.491c.31.577.085 1.307-.492 1.617l-10.806 5.761a3.612 3.612 0 0 1-3.387 0L2.67 24.607a3.613 3.613 0 0 1-1.911-3.19v-4.09c0-1.11.506-2.135 1.363-2.824L18.887 1.21a3.618 3.618 0 0 1 2.249-.787c.815 0 1.602.28 2.248.787L40.15 14.517a3.57 3.57 0 0 1 1.363 2.825v20.223a3.608 3.608 0 0 1-3.611 3.597Z"
/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h95v41.598H0z" />
</clipPath>
</defs>
</svg>
);
} );
ZohoFullLogo.propTypes = {
height: PropTypes.number,
title: PropTypes.string,
width: PropTypes.number,
};
ZohoFullLogo.displayName = 'Svgs/ZohoFullLogo';
export default ZohoFullLogo;