@gravityforms/components/react/admin/elements/Svgs/SlackLogo/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 SlackLogo
 * @description The Slack logo.
 *
 * @since 2.3.1
 *
 * @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 SlackLogo from '@gravityforms/components/react/admin/elements/Svgs/SlackLogo';
 *
 * return (
 *    <SlackLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const SlackLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="4 3.043 92 92" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_2944_85285)">
				<rect width="92" height="92" x="4" y="3.043" fill="#4A154B" rx="46" />
				<path fill="#E01E5A" fillRule="evenodd" d="M34.967 55.889a5.454 5.454 0 0 1-5.462 5.462 5.46 5.46 0 0 1-5.462-5.462 5.46 5.46 0 0 1 5.462-5.462h5.462v5.462Zm2.727 0a5.454 5.454 0 0 1 5.462-5.462 5.454 5.454 0 0 1 5.462 5.462v13.65a5.454 5.454 0 0 1-5.462 5.463 5.454 5.454 0 0 1-5.462-5.462V55.889Z" clipRule="evenodd" />
				<path fill="#36C5F0" fillRule="evenodd" d="M43.154 33.967a5.454 5.454 0 0 1-5.462-5.462 5.454 5.454 0 0 1 5.462-5.462 5.454 5.454 0 0 1 5.462 5.462v5.462h-5.462Zm0 2.768a5.454 5.454 0 0 1 5.462 5.462 5.454 5.454 0 0 1-5.462 5.462H29.462A5.46 5.46 0 0 1 24 42.197a5.46 5.46 0 0 1 5.462-5.462h13.692Z" clipRule="evenodd" />
				<path fill="#2EB67D" fillRule="evenodd" d="M65.034 42.197a5.454 5.454 0 0 1 5.462-5.462 5.454 5.454 0 0 1 5.462 5.462 5.454 5.454 0 0 1-5.462 5.462h-5.462v-5.462Zm-2.727 0a5.454 5.454 0 0 1-5.462 5.462 5.454 5.454 0 0 1-5.462-5.462V28.505a5.454 5.454 0 0 1 5.462-5.462 5.454 5.454 0 0 1 5.462 5.462v13.692Z" clipRule="evenodd" />
				<path fill="#ECB22E" fillRule="evenodd" d="M56.845 64.078a5.454 5.454 0 0 1 5.462 5.462 5.454 5.454 0 0 1-5.462 5.462 5.454 5.454 0 0 1-5.462-5.462v-5.462h5.462Zm0-2.727a5.454 5.454 0 0 1-5.462-5.462 5.454 5.454 0 0 1 5.462-5.462h13.692a5.454 5.454 0 0 1 5.462 5.462 5.454 5.454 0 0 1-5.462 5.462H56.845Z" clipRule="evenodd" />
			</g>
			<defs>
				<filter id="filter0_d_2944_85285" width="100" height="100" x="0" y=".043" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
					<feFlood floodOpacity="0" result="BackgroundImageFix" />
					<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="2" />
					<feColorMatrix values="0 0 0 0 0.0687866 0 0 0 0 0.097585 0 0 0 0 0.37981 0 0 0 0.0779552 0" />
					<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2944_85285" />
					<feBlend in="SourceGraphic" in2="effect1_dropShadow_2944_85285" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

SlackLogo.displayName = 'Svgs/SlackLogo';

export default SlackLogo;