@gravityforms/components/react/admin/elements/Svgs/CloudflareFullLogo/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 CloudflareFullLogo
 * @description The Cloudflare full logo.
 *
 * @since 6.5.0
 *
 * @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 CloudflareFullLogo from '@gravityforms/components/react/admin/elements/Svgs/CloudflareFullLogo';
 *
 * return (
 *    <CloudflareFullLogo height={ 24.85 } width={ 110 } />
 * );
 *
 */
const CloudflareFullLogo = forwardRef( ( {
	height = 25,
	title = '',
	width = 110,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 239 54" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g clipPath="url(#cloudflare-full-logo-clip-path)">
				<path d="m51.027 36.435.378-1.33c.459-1.573.288-3.038-.477-4.105-.702-.986-1.872-1.564-3.294-1.637l-26.907-.343a.53.53 0 0 1-.423-.226.54.54 0 0 1-.054-.489c.09-.262.35-.47.62-.479l27.151-.343c3.222-.145 6.705-2.776 7.929-5.977l1.547-4.07a.9.9 0 0 0 .063-.343c0-.064-.009-.127-.018-.19-1.745-7.948-8.81-13.89-17.242-13.89-7.775 0-14.38 5.046-16.747 12.054a7.95 7.95 0 0 0-5.589-1.555c-3.734.37-6.731 3.39-7.1 7.143a8 8 0 0 0 .207 2.795C4.978 23.63.09 28.649.09 34.807c0 .56.046 1.103.118 1.646a.525.525 0 0 0 .522.452l49.666.009h.018a.66.66 0 0 0 .612-.48" fill="#F6821F" />
				<path d="M59.99 17.736c-.251 0-.495.01-.746.018a.25.25 0 0 0-.117.027.43.43 0 0 0-.27.29l-1.062 3.671c-.46 1.573-.288 3.038.477 4.105.702.986 1.872 1.565 3.293 1.637l5.733.344c.17.009.315.09.405.226a.55.55 0 0 1 .063.488c-.09.262-.351.47-.621.48l-5.958.343c-3.23.154-6.722 2.776-7.946 5.977l-.432 1.13a.32.32 0 0 0 .28.434h20.527a.56.56 0 0 0 .53-.398c.36-1.275.55-2.613.55-4.005 0-8.148-6.588-14.767-14.705-14.767" fill="#FBAD41" />
				<path d="M97.309 24.363H100.701V33.686H106.641V36.67H97.309V24.363Z" fill="black" />
				<path d="M110.16 30.55V30.513C110.16 26.978 112.995 24.111 116.774 24.111C120.555 24.111 123.353 26.941 123.353 30.477V30.513C123.353 34.049 120.519 36.916 116.739 36.916C112.959 36.916 110.16 34.086 110.16 30.55ZM119.888 30.55V30.513C119.888 28.741 118.611 27.186 116.739 27.186C114.885 27.186 113.643 28.696 113.643 30.477V30.513C113.643 32.286 114.921 33.841 116.774 33.841C118.647 33.841 119.888 32.331 119.888 30.55Z" fill="black" />
				<path d="M127.51 31.272V24.363H130.956V31.208C130.956 32.981 131.847 33.831 133.215 33.831C134.583 33.831 135.474 33.026 135.474 31.299V24.372H138.92V31.2C138.92 35.179 136.662 36.915 133.179 36.915C129.696 36.897 127.51 35.125 127.51 31.272Z" fill="black" />
				<path d="M144.123 24.363H148.847C153.222 24.363 155.759 26.895 155.759 30.449V30.485C155.759 34.039 153.185 36.679 148.775 36.679H144.123V24.363ZM148.902 33.65C150.935 33.65 152.277 32.529 152.277 30.54V30.503C152.277 28.532 150.927 27.393 148.902 27.393H147.516V33.65H148.902Z" fill="black" />
				<path d="M160.689 24.363H170.499V27.347H164.092V29.445H169.887V32.275H164.092V36.67H160.689V24.363Z" fill="black" />
				<path d="M175.225 24.363H178.617V33.686H184.548V36.67H175.225V24.363Z" fill="black" />
				<path d="M193.429 24.273H196.705L201.924 36.671H198.279L197.388 34.473H192.664L191.791 36.671H188.219L193.429 24.273ZM196.399 31.815L195.031 28.315L193.645 31.815H196.399Z" fill="black" />
				<path d="M206.289 24.363H212.085C213.956 24.363 215.253 24.861 216.072 25.701C216.791 26.407 217.16 27.356 217.16 28.568V28.604C217.16 30.485 216.161 31.733 214.641 32.384L217.565 36.679H213.642L211.175 32.954H209.682V36.679H206.289V24.363ZM211.922 30.268C213.074 30.268 213.741 29.708 213.741 28.812V28.776C213.741 27.808 213.038 27.32 211.905 27.32H209.682V30.277H211.922V30.268Z" fill="black" />
				<path d="M222.057 24.363H231.91V27.266H225.422V29.129H231.298V31.814H225.422V33.767H232V36.67H222.057V24.363Z" fill="black" />
				<path d="M89.875 31.996C89.398 33.072 88.399 33.841 87.067 33.841C85.214 33.841 83.936 32.295 83.936 30.513V30.477C83.936 28.705 85.178 27.186 87.031 27.186C88.426 27.186 89.497 28.054 89.947 29.229H93.529C92.953 26.299 90.397 24.111 87.067 24.111C83.287 24.111 80.453 26.978 80.453 30.513V30.55C80.453 34.085 83.252 36.916 87.031 36.916C90.262 36.916 92.791 34.809 93.457 31.987H89.875V31.996Z" fill="black" />
			</g>
			<defs>
				<clipPath id="cloudflare-full-logo-clip-path">
					<path d="M.092 2H232v35.929H.092z" fill="white" />
				</clipPath>
			</defs>
		</svg>
	);
} );

CloudflareFullLogo.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

CloudflareFullLogo.displayName = 'Svgs/CloudflareFullLogo';

export default CloudflareFullLogo;