@gravityforms/components/react/admin/elements/Svgs/GravityCRMFullLogo/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 GravityCRMFullLogo
 * @description The Gravity CRM Full logo.
 *
 * @since 5.3.2
 *
 * @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.primaryColor   The primary fill color.
 * @param {string}      props.secondaryColor The secondary fill color.
 * @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 GravityCRMFullLogo from '@gravityforms/components/react/admin/elements/Svgs/GravityCRMFullLogo';
 *
 * return (
 *    <GravityCRMFullLogo height={ 32 } width={ 315 } />
 * );
 *
 */
const GravityCRMFullLogo = forwardRef( ( {
	height = 34,
	logoFill = '#006DFE',
	primaryFill = '#1B2A45',
	secondaryFill = '#8996AD',
	title = '',
	width = 243,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 243 34" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g fill={ primaryFill }>
				<path d="M49.53 6.249c4.147 0 8.295 1.955 9.48 6.813h-4.385c-1.066-2.014-2.725-2.785-5.095-2.785-3.91 0-6.102 2.903-6.102 6.636 0 3.91 2.37 6.576 6.102 6.576 2.844 0 4.977-.83 5.866-3.97h-5.688v-3.732h9.776c.118 1.955.059 3.91-.652 5.806-1.6 4.148-5.332 5.925-9.302 5.925-5.51 0-10.664-3.733-10.664-10.605 0-6.932 5.154-10.664 10.664-10.664Z" />
				<path fillRule="evenodd" d="M81.76 26.51v.593h-4.74l-4.265-6.813h-3.733v6.813H64.58V6.426h8.887c4.74 0 7.346 3.437 7.346 7.11 0 2.607-1.362 4.917-3.732 6.102l4.68 6.873Zm-8.354-9.834c1.896 0 3.081-1.422 3.081-3.2 0-1.717-1.185-3.14-3.08-3.14h-4.444v6.34h4.443ZM89.699 27.162l1.6-3.436h8.709l1.659 3.436h4.621v-.592L96.749 6.308h-2.073L85.078 26.57v.592h4.621Zm8.828-7.11H92.72l2.903-6.813 2.903 6.814Z" clipRule="evenodd" />
				<path d="m115.115 18.157 2.193-5.036 2.784-6.576h4.74v.652l-8.887 19.965h-1.837l-8.946-19.965v-.652h4.74l2.784 6.576 2.311 5.095h.118v-.059ZM129.098 6.426v20.737h4.443V6.426h-4.443ZM137.866 10.337V6.486h17.537v3.85h-6.576v16.827h-4.325V10.337h-6.636ZM169.681 10.751l-2.073 4.088h-.119l-1.955-3.97-2.607-4.383h-4.799v.651l7.169 11.731v8.235h4.443v-8.235l7.169-11.73v-.652h-4.74l-2.488 4.265Z" />
			</g>
			<path fill={ logoFill } d="M1.623 10.844a7.3 7.3 0 0 1 7.3-7.3h4.632v11.933H1.623v-4.633Zm0 7.02h4.632a7.3 7.3 0 0 1 7.3 7.3v4.633H8.923a7.3 7.3 0 0 1-7.3-7.3v-4.634Zm14.32-14.32h4.632a7.3 7.3 0 0 1 7.3 7.3v4.633h-4.632a7.3 7.3 0 0 1-7.3-7.3V3.543Zm0 14.32h11.932v4.633a7.301 7.301 0 0 1-7.3 7.3h-4.633V17.863Z" />
			<g fill={ secondaryFill }>
				<path d="M193.999 26.82c-2.925 0-5.343-.966-7.256-2.897-1.895-1.931-2.842-4.304-2.842-7.118s.947-5.187 2.842-7.118c1.913-1.932 4.331-2.897 7.256-2.897 1.766 0 3.384.423 4.856 1.269 1.49.846 2.648 1.986 3.476 3.42l-2.235 1.298c-.551-1.067-1.379-1.913-2.483-2.539-1.085-.643-2.29-.965-3.614-.965-2.226 0-4.047.717-5.463 2.152-1.398 1.434-2.097 3.228-2.097 5.38 0 2.133.699 3.918 2.097 5.352 1.416 1.435 3.237 2.152 5.463 2.152 1.324 0 2.529-.312 3.614-.938 1.104-.643 1.932-1.49 2.483-2.538l2.235 1.27c-.809 1.434-1.959 2.583-3.449 3.448-1.49.846-3.117 1.269-4.883 1.269ZM217.515 26.461l-4.332-7.394h-4.552v7.394h-2.566V7.148h7.725c1.655 0 3.072.589 4.249 1.766 1.177 1.159 1.766 2.566 1.766 4.221 0 1.251-.377 2.391-1.131 3.421a5.913 5.913 0 0 1-2.87 2.18l4.553 7.725h-2.842ZM208.631 9.55v7.2h5.159c.957 0 1.766-.349 2.428-1.048a3.598 3.598 0 0 0 1.021-2.566c0-.993-.34-1.84-1.021-2.538-.662-.699-1.471-1.048-2.428-1.048h-5.159ZM241.831 7.148v19.313h-2.539V11.37l-6.318 10.511h-.331l-6.318-10.484v15.064h-2.566V7.148h2.897l6.153 10.209 6.125-10.209h2.897Z" />
			</g>
		</svg>
	);
} );

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

GravityCRMFullLogo.displayName = 'Svgs/GravityCRMFullLogo';

export default GravityCRMFullLogo;