@gravityforms/components/react/admin/elements/Svgs/GravityCRMTextLogo/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 GravityCRMTextLogo
 * @description The Gravity CRM text logo.
 *
 * @since 3.6.6
 *
 * @param {object} props               Component props.
 * @param {number} props.height        The height of the logo.
 * @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 text component.
 * @example
 * import GravityCRMTextLogo from '@gravityforms/components/react/admin/elements/Svgs/GravityCRMTextLogo';
 *
 * return (
 *    <GravityCRMTextLogo height={ 20 } width={ 200 } />
 * );
 *
 */
const GravityCRMTextLogo = forwardRef( ( {
	height = 20,
	primaryFill = '#1B2A45',
	secondaryFill = '#8996AD',
	title = '',
	width = 190,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 379 41" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path
				d="M20.5558 0.748047C28.2219 0.748047 35.8879 4.36205 38.0782 13.3423H29.9741C28.0028 9.61879 24.9364 8.19501 20.5558 8.19501C13.3278 8.19501 9.27565 13.5613 9.27565 20.4608C9.27565 27.6888 13.6563 32.617 20.5558 32.617C25.8125 32.617 29.7551 31.0838 31.3978 25.2795H20.8844V18.38H38.9544C39.1734 21.994 39.0638 25.6081 37.7496 29.1125C34.7927 36.7786 27.8933 40.0641 20.5558 40.0641C10.3709 40.0641 0.843018 33.1646 0.843018 20.4608C0.843018 7.64751 10.3709 0.748047 20.5558 0.748047Z"
				fill="#1B2A45"
			/>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M80.1322 38.2027V39.2978H71.371L63.4858 26.7035H56.5865V39.2978H48.3728V1.07693H64.8001C73.5613 1.07693 78.38 7.42882 78.38 14.2188C78.38 19.0374 75.8611 23.3086 71.4805 25.4989L80.1322 38.2027ZM64.6906 20.0231C68.1951 20.0231 70.3854 17.3947 70.3854 14.1093C70.3854 10.9333 68.1951 8.30505 64.6906 8.30505H56.477V20.0231H64.6906Z"
				fill={ primaryFill }
			/>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M94.8072 39.4068L97.764 33.055H113.863L116.929 39.4068H125.471V38.3117L107.839 0.857501H104.006L86.2649 38.3117V39.4068H94.8072ZM111.125 26.265H100.392L105.759 13.6707L111.125 26.265Z"
				fill={ primaryFill }
			/>
			<path
				d="M141.789 22.7608L145.841 13.452L150.988 1.29584H159.75V2.50048L143.322 39.4071H139.927L123.391 2.50048V1.29584H132.152L137.299 13.452L141.57 22.8703H141.789V22.7608Z"
				fill={ primaryFill }
			/>
			<path
				d="M167.635 1.07693V39.4073H175.849V1.07693H167.635Z"
				fill={ primaryFill }
			/>
			<path
				d="M183.843 8.30488V1.18638H216.26V8.30488H204.104V39.4071H196.109V8.30488H183.843Z"
				fill={ primaryFill }
			/>
			<path
				d="M242.653 9.07143L238.82 16.628H238.601L234.987 9.29041L230.168 1.18638H221.298V2.39103L234.549 24.075V39.2976H242.763V24.075L256.014 2.39103V1.18638H247.253L242.653 9.07143Z"
				fill={ primaryFill }
			/>
			<path
				d="M289.604 39.0372C284.198 39.0372 279.727 37.2522 276.191 33.6822C272.689 30.1122 270.938 25.7262 270.938 20.5242C270.938 15.3222 272.689 10.9362 276.191 7.36623C279.727 3.79623 284.198 2.01123 289.604 2.01123C292.868 2.01123 295.86 2.79323 298.58 4.35723C301.334 5.92123 303.476 8.02923 305.006 10.6812L300.875 13.0782C299.855 11.1062 298.325 9.54223 296.285 8.38623C294.279 7.19623 292.052 6.60123 289.604 6.60123C285.49 6.60123 282.124 7.92723 279.506 10.5792C276.922 13.2312 275.63 16.5462 275.63 20.5242C275.63 24.4682 276.922 27.7662 279.506 30.4182C282.124 33.0702 285.49 34.3962 289.604 34.3962C292.052 34.3962 294.279 33.8182 296.285 32.6622C298.325 31.4722 299.855 29.9082 300.875 27.9702L305.006 30.3162C303.51 32.9682 301.385 35.0932 298.631 36.6912C295.877 38.2552 292.868 39.0372 289.604 39.0372Z"
				fill={ secondaryFill }
			/>
			<path
				d="M333.073 38.3742L325.066 24.7062H316.651V38.3742H311.908V2.67423H326.188C329.248 2.67423 331.866 3.76223 334.042 5.93823C336.218 8.08023 337.306 10.6812 337.306 13.7412C337.306 16.0532 336.609 18.1612 335.215 20.0652C333.855 21.9692 332.087 23.3122 329.911 24.0942L338.326 38.3742H333.073ZM316.651 7.11123V20.4222H326.188C327.956 20.4222 329.452 19.7762 330.676 18.4842C331.934 17.1582 332.563 15.5772 332.563 13.7412C332.563 11.9052 331.934 10.3412 330.676 9.04923C329.452 7.75723 327.956 7.11123 326.188 7.11123H316.651Z"
				fill={ secondaryFill }
			/>
			<path
				d="M378.02 2.67423V38.3742H373.328V10.4772L361.649 29.9082H361.037L349.358 10.5282V38.3742H344.615V2.67423H349.97L361.343 21.5442L372.665 2.67423H378.02Z"
				fill={ secondaryFill }
			/>
		</svg>
	);
} );

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

GravityCRMTextLogo.displayName = 'Svgs/GravityCRMTextLogo';

export default GravityCRMTextLogo;