@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 = '#828383',
	title = '',
	width = 188,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 225 24" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path d="M10.2147 2C14.0421 2 17.8696 3.80701 18.9631 8.29716H14.9169C13.9327 6.43539 12.4018 5.7235 10.2147 5.7235C6.60594 5.7235 4.58284 8.40668 4.58284 11.8564C4.58284 15.4705 6.76997 17.9345 10.2147 17.9345C12.8392 17.9345 14.8076 17.168 15.6278 14.2658H10.3787V10.816H19.4006C19.5099 12.623 19.4552 14.4301 18.799 16.1823C17.3228 20.0154 13.8781 21.6581 10.2147 21.6581C5.12964 21.6581 0.372681 18.2084 0.372681 11.8564C0.372681 5.44975 5.12964 2 10.2147 2Z" fill={ primaryFill } />
			<path fillRule="evenodd" clipRule="evenodd" d="M39.9594 20.7274V21.275H35.5852L31.6484 14.9778H28.2037V21.275H24.1029V2.16444H32.3046C36.6788 2.16444 39.0846 5.3404 39.0846 8.73539C39.0846 11.1447 37.827 13.2803 35.6399 14.3755L39.9594 20.7274ZM32.2499 11.6376C33.9996 11.6376 35.0931 10.3234 35.0931 8.68065C35.0931 7.09267 33.9996 5.77852 32.2499 5.77852H28.149V11.6376H32.2499Z" fill={ primaryFill } />
			<path fillRule="evenodd" clipRule="evenodd" d="M47.2862 21.3295L48.7625 18.1536H56.8L58.331 21.3295H62.5959V20.7819L53.7928 2.05473H51.8791L43.0213 20.7819V21.3295H47.2862ZM55.4331 14.7585H50.0747L52.754 8.46138L55.4331 14.7585Z" fill={ primaryFill } />
			<path d="M70.7429 13.0064L72.766 8.35201L75.3358 2.2739H79.71V2.87622L71.5084 21.3296H69.8134L61.557 2.87622V2.2739H65.9313L68.5011 8.35201L70.6335 13.0612H70.7429V13.0064Z" fill={ primaryFill } />
			<path d="M83.6469 2.16444V21.3297H87.7477V2.16444H83.6469Z" fill={ primaryFill } />
			<path d="M91.7392 5.77844V2.21917H107.924V5.77844H101.855V21.3296H97.8632V5.77844H91.7392Z" fill={ primaryFill } />
			<path d="M121.101 6.16171L119.187 9.94002H119.078L117.274 6.2712L114.868 2.21917H110.439V2.82149L117.055 13.6635V21.2749H121.156V13.6635L127.772 2.82149V2.21917H123.398L121.101 6.16171Z" fill={ primaryFill } />
			<path d="M144.121 21.6601C141.255 21.6601 138.884 20.7123 137.01 18.8167C135.153 16.9211 134.225 14.5922 134.225 11.8301C134.225 9.06789 135.153 6.73901 137.01 4.8434C138.884 2.9478 141.255 2 144.121 2C145.852 2 147.438 2.41523 148.88 3.24568C150.341 4.07614 151.476 5.19544 152.287 6.6036L150.097 7.87637C149.556 6.82927 148.745 5.99882 147.664 5.385C146.6 4.75314 145.419 4.4372 144.121 4.4372C141.94 4.4372 140.155 5.14128 138.767 6.54945C137.397 7.95761 136.712 9.71781 136.712 11.8301C136.712 13.9242 137.397 15.6754 138.767 17.0836C140.155 18.4917 141.94 19.1958 144.121 19.1958C145.419 19.1958 146.6 18.8889 147.664 18.2751C148.745 17.6432 149.556 16.8128 150.097 15.7837L152.287 17.0294C151.494 18.4376 150.368 19.5659 148.907 20.4144C147.447 21.2449 145.852 21.6601 144.121 21.6601Z" fill={ secondaryFill } />
			<path d="M167.169 21.3081L162.923 14.0506H158.462V21.3081H155.947V2.35204H163.518C165.141 2.35204 166.529 2.92975 167.682 4.08516C168.836 5.22252 169.413 6.6036 169.413 8.22841C169.413 9.45603 169.043 10.5753 168.304 11.5863C167.583 12.5973 166.646 13.3104 165.492 13.7257L169.954 21.3081H167.169ZM158.462 4.708V11.7759H163.518C164.455 11.7759 165.249 11.4329 165.898 10.7468C166.565 10.0428 166.898 9.20329 166.898 8.22841C166.898 7.25353 166.565 6.42307 165.898 5.73704C165.249 5.05102 164.455 4.708 163.518 4.708H158.462Z" fill={ secondaryFill } />
			<path d="M191 2.35204V21.3081H188.512V6.49528L182.32 16.8128H181.996L175.803 6.52237V21.3081H173.289V2.35204H176.128L182.158 12.3716L188.161 2.35204H191Z" 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;