metadata-based-explorer1
Version:
Box UI Elements
81 lines (73 loc) • 3.77 kB
JavaScript
// @flow
import * as React from 'react';
import uniqueId from 'lodash/uniqueId';
import AccessibleSVG from '../accessible-svg';
const ICON_CLASS = 'icon-box-tools-download';
type Props = {
className: string,
height?: number,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
};
class IconBoxToolsDownload extends React.Component<Props> {
static defaultProps = {
className: '',
height: 134,
width: 136,
};
idPrefix = `${uniqueId(ICON_CLASS)}-`;
render() {
const { className, height, title, width } = this.props;
return (
<AccessibleSVG
className={`${ICON_CLASS} ${className}`}
height={height}
title={title}
viewBox="0 0 136 134"
width={width}
>
<defs>
<rect height="120" id={`${this.idPrefix}a`} rx="27.692" width="120" />
</defs>
<g fill="none" fillRule="evenodd">
<g transform="translate(3 11)">
<use fill="#0065E3" xlinkHref={`#${this.idPrefix}a`} />
<rect
height="122.308"
rx="27.692"
stroke="#C3D1D9"
strokeOpacity=".154"
strokeWidth="2.308"
width="122.308"
x="-1.154"
y="-1.154"
/>
</g>
<path
d="M64.075 72.337c-4.742 0-8.587-3.95-8.587-8.828 0-4.873 3.845-8.823 8.587-8.823 4.74 0 8.582 3.95 8.582 8.823 0 4.878-3.843 8.828-8.582 8.828m-25.282 0c-4.741 0-8.589-3.95-8.589-8.826 0-4.875 3.848-8.825 8.589-8.825 4.74 0 8.58 3.95 8.58 8.823 0 4.878-3.84 8.828-8.58 8.828m25.282-23.543c7.9 0 14.308 6.587 14.308 14.715 0 8.132-6.408 14.721-14.308 14.721-5.476 0-10.24-3.17-12.64-7.817-2.4 4.646-7.163 7.817-12.642 7.817-7.827 0-14.178-6.458-14.304-14.475h-.003V39.338c.035-1.602 1.293-2.884 2.857-2.884 1.563 0 2.833 1.282 2.861 2.884v12.4a14.009 14.009 0 0 1 8.589-2.944c5.479 0 10.241 3.168 12.642 7.82 2.4-4.652 7.164-7.82 12.64-7.82zm36.51 24.509c.987 1.3.703 3.106-.656 4.072-1.36.966-3.27.72-4.323-.54l-6.69-8.434-6.694 8.434c-1.042 1.26-2.963 1.506-4.32.54-1.356-.966-1.64-2.772-.65-4.072h-.003l7.773-9.813-7.773-9.831h.003c-.99-1.297-.706-3.107.65-4.07 1.357-.97 3.278-.722 4.32.536v-.002l6.694 8.446 6.7-8.446v.002c1.052-1.258 2.961-1.507 4.322-.536 1.36.962 1.641 2.773.657 4.07l-7.787 9.831 7.778 9.813z"
fill="#FFFFFE"
/>
<text
fill="#FFF"
fontFamily="Lato-Regular, Lato"
fontSize="23.077"
transform="translate(23.77 36.385)"
>
<tspan x="1.154" y="68">
TOOLS
</tspan>
</text>
<g transform="translate(99 1)">
<circle cx="18" cy="18" fill="#26C281" r="18" stroke="#F5F7F9" strokeWidth="2" />
<path
d="M18.376 26.57l5.898-6.74a.5.5 0 0 0-.376-.83h-3.565v-7.5a.5.5 0 0 0-.5-.5h-3.666a.5.5 0 0 0-.5.5V19h-3.565a.5.5 0 0 0-.376.83l5.898 6.74a.5.5 0 0 0 .752 0z"
fill="#FFF"
/>
</g>
</g>
</AccessibleSVG>
);
}
}
export default IconBoxToolsDownload;