lucid-ui
Version:
A UI component library from AppNexus.
38 lines • 1.86 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import Icon, { propTypes as iconPropTypes } from '../Icon';
import { lucidClassNames } from '../../../util/style-helpers';
import { omitProps } from '../../../util/component-types';
import PropTypes from 'react-peek/prop-types';
const { oneOf } = PropTypes;
const cx = lucidClassNames.bind('&-OutwardArrowsIcon');
const paths = {
horizontal: React.createElement("path", { d: 'M4 8h8m-1.5 2l2-2-2-2m-5 4l-2-2 2-2m-5-2.5v9m15-9v9' }),
vertical: React.createElement("path", { d: 'M8 4v8m-2-1.5l2 2 2-2m-4-5l2-2 2 2m2.5-5h-9m9 15h-9' }),
diagonal: (React.createElement(React.Fragment, null,
React.createElement("path", { d: 'M11.828 4.172l-7.656 7.656m-.354-2.474v2.828h2.828m2.708-8.364h2.828v2.828' }),
React.createElement("path", { d: 'M.5 8.5v7h7m8-8v-7h-7' }))),
};
export const OutwardArrowsIcon = ({ className, kind = 'horizontal', ...passThroughs }) => {
return (React.createElement(Icon, Object.assign({}, omitProps(passThroughs, undefined, _.keys(OutwardArrowsIcon.propTypes), false), _.pick(passThroughs, _.keys(iconPropTypes)), { className: cx('&', className) }), paths[kind]));
};
OutwardArrowsIcon.displayName = 'OutwardArrowsIcon';
OutwardArrowsIcon.peek = {
description: `
Typically used to denote width, height, or aspect ratio.
`,
categories: ['visual design', 'icons'],
extend: 'Icon',
madeFrom: ['Icon'],
};
OutwardArrowsIcon.propTypes = {
...iconPropTypes,
kind: oneOf(['horizontal', 'vertical', 'diagonal']) `
Determines the kind of arrows you want to display. \`horizontal\` is
usually used for width. \`vertical\` is usually used for height.
\`diagonal\` is usually used for aspect ratio.
`,
};
OutwardArrowsIcon.defaultProps = Icon.defaultProps;
export default OutwardArrowsIcon;
//# sourceMappingURL=OutwardArrowsIcon.js.map