@gravityforms/components/react/admin/elements/Svgs/CloudflareLogo/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 CloudflareLogo
 * @description The Cloudflare 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 CloudflareLogo from '@gravityforms/components/react/admin/elements/Svgs/CloudflareLogo';
 *
 * return (
 *    <CloudflareLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const CloudflareLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 44 44" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path d="M22 0C34.1503 0 44 9.84974 44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0Z" fill="#F1F1F1" />
			<path d="M27.17 26.52L27.33 25.94C27.52 25.26 27.45 24.63 27.13 24.16C26.84 23.73 26.35 23.48 25.76 23.45L14.53 23.3C14.46 23.29 14.4 23.27 14.35 23.23C14.31 23.17 14.3 23.09 14.33 23.02C14.35 22.96 14.38 22.91 14.43 22.88C14.48 22.84 14.53 22.82 14.59 22.82L25.92 22.67C27.26 22.61 28.72 21.47 29.23 20.08L29.88 18.32C29.91 18.25 29.91 18.16 29.9 18.09C29.17 14.64 26.22 12.07 22.7 12.07C19.46 12.07 16.7 14.26 15.71 17.29C15.05 16.77 14.21 16.53 13.38 16.62C11.82 16.78 10.57 18.09 10.42 19.71C10.38 20.12 10.41 20.52 10.51 20.92C7.96 21 5.93 23.17 5.93 25.84C5.93 26.08 5.95 26.32 5.98 26.55C5.98 26.6 6.01 26.65 6.05 26.69C6.09 26.73 6.14 26.75 6.19 26.75H26.92C26.98 26.75 27.03 26.73 27.08 26.69C27.13 26.65 27.16 26.6 27.18 26.54L27.17 26.52Z" fill="#F6821F" />
			<path d="M30.91 18.42C30.81 18.42 30.7 18.42 30.6 18.43C30.58 18.43 30.57 18.43 30.55 18.44C30.52 18.44 30.5 18.47 30.48 18.49C30.46 18.51 30.45 18.54 30.44 18.57L30 20.16C29.81 20.84 29.88 21.47 30.2 21.94C30.49 22.37 30.98 22.62 31.57 22.65L33.96 22.8C34.03 22.81 34.09 22.83 34.14 22.86C34.2 22.9 34.24 22.96 34.25 23.03C34.25 23.07 34.25 23.1 34.24 23.14C34.22 23.2 34.19 23.25 34.14 23.28C34.09 23.32 34.04 23.34 33.98 23.34L31.49 23.49C30.14 23.55 28.68 24.69 28.18 26.08L28 26.57C27.99 26.61 28 26.66 28.02 26.7C28.04 26.74 28.08 26.76 28.12 26.76H36.68C36.78 26.76 36.82 26.74 36.86 26.71C36.9 26.68 36.93 26.63 36.94 26.58C37.09 26.01 37.17 25.43 37.17 24.85C37.17 21.31 34.42 18.45 31.03 18.45L30.91 18.42Z" fill="#FBAD41" />
		</svg>
	);
} );

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

CloudflareLogo.displayName = 'Svgs/CloudflareLogo';

export default CloudflareLogo;