@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
78 lines (72 loc) • 4.88 kB
JavaScript
import { React, PropTypes } from '@gravityforms/libraries';
const { forwardRef } = React;
/**
* @module WhatsAppLogo
* @description The WhatsApp 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 WhatsAppLogo from '@gravityforms/components/react/admin/elements/Svgs/WhatsAppLogo';
*
* return (
* <WhatsAppLogo height={ 44 } width={ 44 } />
* );
*
*/
const WhatsAppLogo = forwardRef( ( {
height = 44,
title = '',
width = 44,
}, ref ) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="4 3 92 92" fill="none" ref={ ref }>
{ title !== '' && <title>{ title }</title> }
<g filter="url(#filter0_d_3910_125717)">
<rect width="92" height="92" x="4" y="3" fill="url(#paint0_linear_3910_125717)" rx="46" />
<path fill="#000" fillOpacity=".12" d="M20.255 48.424a30.061 30.061 0 0 0 4.049 15.102L20 79.18l16.08-4.2a30.404 30.404 0 0 0 14.496 3.677h.013c16.718 0 30.327-13.553 30.335-30.208.002-8.072-3.15-15.661-8.877-21.37-5.728-5.71-13.344-8.856-21.458-8.86-16.72 0-30.328 13.55-30.334 30.206Z" />
<path fill="#000" fillOpacity=".12" d="M20.255 48.424a30.061 30.061 0 0 0 4.049 15.102L20 79.18l16.08-4.2a30.404 30.404 0 0 0 14.496 3.677h.013c16.718 0 30.327-13.553 30.335-30.208.002-8.072-3.15-15.661-8.877-21.37-5.728-5.71-13.344-8.856-21.458-8.86-16.72 0-30.328 13.55-30.334 30.206Z" />
<path fill="url(#paint1_linear_3910_125717)" d="M21.343 48.11a28.859 28.859 0 0 0 3.906 14.527L21.1 77.695l15.51-4.04a29.401 29.401 0 0 0 13.98 3.536h.014c16.124 0 29.25-13.036 29.257-29.059.003-7.764-3.038-15.065-8.562-20.558-5.523-5.492-12.87-8.519-20.696-8.522-16.127 0-29.252 13.035-29.259 29.057Z" />
<path fill="url(#paint2_linear_3910_125717)" d="M20.299 48.1a29.897 29.897 0 0 0 4.045 15.048l-4.3 15.598 16.067-4.186a30.442 30.442 0 0 0 14.483 3.665h.013c16.703 0 30.3-13.505 30.307-30.101.003-8.044-3.147-15.607-8.868-21.296-5.723-5.69-13.332-8.824-21.44-8.828-16.705 0-30.3 13.503-30.307 30.1Zm9.567 14.262-.6-.946a24.83 24.83 0 0 1-3.85-13.315c.005-13.794 11.305-25.017 25.2-25.017 6.729.003 13.053 2.609 17.81 7.338 4.756 4.728 7.373 11.014 7.37 17.7-.005 13.795-11.305 25.019-25.19 25.019h-.01a25.284 25.284 0 0 1-12.82-3.488l-.92-.542-9.535 2.483 2.545-9.232Z" />
<path fill="#fff" fillRule="evenodd" d="M43.032 35.516c-.568-1.252-1.165-1.278-1.704-1.3-.442-.019-.947-.017-1.452-.017s-1.325.188-2.019.941c-.694.753-2.65 2.573-2.65 6.274 0 3.703 2.713 7.28 3.091 7.782.38.501 5.24 8.34 12.937 11.356 6.397 2.506 7.698 2.008 9.087 1.882 1.388-.125 4.48-1.82 5.111-3.576.631-1.757.631-3.262.442-3.577-.19-.314-.694-.502-1.451-.878-.758-.377-4.48-2.197-5.175-2.448-.694-.25-1.2-.376-1.704.377-.505.753-1.955 2.447-2.397 2.949-.442.503-.884.565-1.641.189-.758-.377-3.197-1.171-6.09-3.734-2.251-1.994-3.77-4.457-4.213-5.21-.442-.753-.047-1.16.333-1.535.34-.337.757-.878 1.136-1.318.378-.439.504-.753.756-1.254.253-.503.127-.942-.063-1.318-.19-.376-1.66-4.097-2.334-5.585Z" clipRule="evenodd" />
</g>
<defs>
<linearGradient id="paint0_linear_3910_125717" x1="27.5" x2="65" y1="95" y2="3" gradientUnits="userSpaceOnUse">
<stop stopColor="#20B038" />
<stop offset="1" stopColor="#60D66A" />
</linearGradient>
<linearGradient id="paint1_linear_3910_125717" x1="50.462" x2="50.462" y1="79.179" y2="18" gradientUnits="userSpaceOnUse">
<stop stopColor="#20B038" />
<stop offset="1" stopColor="#60D66A" />
</linearGradient>
<linearGradient id="paint2_linear_3910_125717" x1="50.462" x2="50.462" y1="79.179" y2="18" gradientUnits="userSpaceOnUse">
<stop stopColor="#F9F9F9" />
<stop offset="1" stopColor="#fff" />
</linearGradient>
<filter id="filter0_d_3910_125717" width="100" height="100" x="0" y="0" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="1" />
<feGaussianBlur stdDeviation="2" />
<feColorMatrix values="0 0 0 0 0.0687866 0 0 0 0 0.097585 0 0 0 0 0.37981 0 0 0 0.0779552 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3910_125717" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow_3910_125717" result="shape" />
</filter>
</defs>
</svg>
);
} );
WhatsAppLogo.propTypes = {
height: PropTypes.number,
title: PropTypes.string,
width: PropTypes.number,
};
WhatsAppLogo.displayName = 'Svgs/WhatsAppLogo';
export default WhatsAppLogo;