@gravityforms/components/react/admin/elements/Svgs/GravityFullLogo/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 GravityFullLogo
 * @description The Gravity full logo.
 *
 * @since 6.3.0
 *
 * @param {object} props             Component props.
 * @param {number} props.height      The height of the logo.
 * @param {string} props.logoFill    The logo fill color.
 * @param {string} props.primaryFill The primary fill color.
 * @param {string} props.secondaryFill The secondary fill color.
 * @param {string} props.title       The title of the logo.
 * @param {number} props.width       The width of the logo.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import GravityFullLogo from '@gravityforms/components/react/admin/elements/Svgs/GravityFullLogo';
 *
 * return (
 *    <GravityFullLogo height={ 19 } width={ 120 } />
 * );
 *
 */
const GravityFullLogo = forwardRef( ( {
	height = 33,
	logoFill = '#FF4F00',
	primaryFill = '#414141',
	secondaryFill = '#FFFFFF',
	title = '',
	width = 162,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 162 33" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g clipPath="url(#gravity-full-logo-clip-path)">
				<path d="M29.9814 22.2529C29.989 23.7546 28.9424 25.6128 27.6378 26.3713L17.4671 32.3402C16.1701 33.0987 14.0389 33.1138 12.7344 32.3706L2.48016 26.5457C1.17563 25.8024 0.0910545 23.967 0.0834701 22.4577L4.09609e-05 10.6638C-0.0075435 9.1621 1.03911 7.30391 2.33606 6.54546L12.5144 0.576491C13.8113 -0.181955 15.9426 -0.197124 17.2471 0.546154L27.5013 6.37102C28.8058 7.1143 29.8904 8.94974 29.898 10.459L29.9814 22.2529Z" fill={ logoFill } />
				<path d="M12.1123 13.7278H25.5823V9.92041H12.1427C10.2238 9.92041 8.63106 10.5803 7.40996 11.8848C4.48235 15.0248 4.39893 22.9278 4.39893 22.9278H25.4761V15.7756H21.6915V19.1204H8.44144C8.52487 17.8765 9.09371 15.6467 10.1707 14.4938C10.6561 13.9705 11.278 13.7278 12.1123 13.7278Z" fill={ secondaryFill } />
				<path d="M49.1019 7.0459C52.7501 7.0459 56.3982 8.79032 57.4448 13.0225H53.5844C52.6666 11.2553 51.1952 10.5575 49.0944 10.5575C45.6586 10.5575 43.717 13.1286 43.717 16.3748C43.717 19.8333 45.8179 22.1693 49.0944 22.1693C51.6124 22.1693 53.4478 21.4185 54.2366 18.688H49.2233V15.4116H57.8317C57.9378 17.156 57.8847 18.8397 57.278 20.5007C55.89 24.164 52.606 25.6961 49.0944 25.6961C44.2403 25.6961 39.7275 22.3969 39.7275 16.3672C39.7275 10.3376 44.2706 7.0459 49.1019 7.0459Z" fill={ primaryFill } />
				<path d="M77.4905 24.8923V25.4384H73.2963L69.5192 19.4391H66.2352V25.4384H62.2988V7.25084C64.9231 7.25084 67.5169 7.22808 70.1412 7.25084C74.3354 7.25084 76.6183 10.2619 76.6183 13.4853C76.6183 15.7985 75.4351 17.8236 73.3418 18.8399L77.4905 24.8923ZM70.1184 16.2384C71.7718 16.2384 72.8488 14.9642 72.8185 13.4094C72.8185 11.8774 71.7946 10.6563 70.1184 10.6563H66.1821V16.246H70.1184V16.2384Z" fill={ primaryFill } />
				<path d="M85.8713 22.45L84.453 25.4611H80.3574V24.9377L88.8065 7.11426H90.6192L99.0152 24.9377V25.4611H94.9499L93.5089 22.45H85.8713ZM87.1607 19.1811H92.2499L89.7015 13.1818L87.1607 19.1811Z" fill={ primaryFill } />
				<path d="M106.873 17.5428L108.814 13.0907L111.279 7.27344H115.451V7.84227L107.631 25.4382H106.001L98.1052 7.84227V7.27344H102.277L104.742 13.0604L106.789 17.5428H106.873Z" fill={ primaryFill } />
				<path d="M119.182 25.4687V7.22803H123.119V25.4687H119.182Z" fill={ primaryFill } />
				<path d="M126.865 10.6561V7.27344H142.323V10.6485H136.513V25.461H132.706V10.6561H126.865Z" fill={ primaryFill } />
				<path d="M153.062 14.6306L154.875 11.0204L157.082 7.28125H161.253V7.85008L154.958 18.1953V25.4688H151.022V18.1953L144.697 7.85008V7.28125H148.921L151.204 11.1493L152.933 14.6306H153.062Z" fill={ primaryFill } />
			</g>
			<defs>
				<clipPath id="gravity-full-logo-clip-path">
					<rect width="162" height="33" fill={ secondaryFill } />
				</clipPath>
			</defs>
		</svg>
	);
} );

GravityFullLogo.propTypes = {
	height: PropTypes.number,
	logoFill: PropTypes.string,
	primaryFill: PropTypes.string,
	secondaryFill: PropTypes.string,
	title: PropTypes.string,
	width: PropTypes.number,
};

GravityFullLogo.displayName = 'Svgs/GravityFullLogo';

export default GravityFullLogo;