added large settings icon

appnexus · May 6, 2019 · 775787f · 775787f
1 parent ff371c3
commit 775787f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/components/Icon/SettingsIcon/SettingsIcon.jsx b/src/components/Icon/SettingsIcon/SettingsIcon.jsx
@@ -1,11 +1,14 @@
 import _ from 'lodash';
 import React from 'react';
+import PropTypes from 'react-peek/prop-types';
 import Icon from '../Icon';
 import { lucidClassNames } from '../../../util/style-helpers';
 import { createClass } from '../../../util/component-types';
 
 const cx = lucidClassNames.bind('&-SettingsIcon');
 
+const { oneOf } = PropTypes;
+
 const SettingsIcon = createClass({
 	displayName: 'SettingsIcon',
 
@@ -22,18 +25,39 @@ const SettingsIcon = createClass({
 
 	propTypes: {
 		...Icon.propTypes,
+		presetSize: oneOf(['small', 'large'])`
+			This differs from the \`size\` attribute that you can set on any icon.
+			This is size variation of the CrossIcon.
+			Defaults to small, so it is an optional prop.
+			Small is 7.28px across.
+			Large is 15.56px across.
+		`,
+	},
+
+	getDefaultProps() {
+		return {
+			presetSize: 'small',
+		};
 	},
 
 	render() {
-		const { className, ...passThroughs } = this.props;
+		const { className, presetSize, ...passThroughs } = this.props;
 
 		return (
 			<Icon
 				{...passThroughs}
 				{..._.pick(passThroughs, _.keys(Icon.propTypes))}
 				className={cx('&', className)}
+				width={presetSize === 'large' ? '36' : 16}
+				height={presetSize === 'large' ? '36' : 16}
+				viewBox={presetSize === 'large' ? '0 0 36 36' : '0 0 16 16'}
 			>
-				<path d="M14.146 6.836l-1.94-.356c-.187-.035-.253-.192-.145-.35l1.112-1.648c.107-.158.084-.4-.05-.534l-1.067-1.066c-.135-.136-.377-.16-.535-.052L9.873 3.94c-.158.107-.316.04-.352-.146l-.354-1.94c-.035-.186-.22-.34-.412-.34H7.246c-.19 0-.375.154-.41.342L6.48 3.794c-.034.188-.192.254-.35.147L4.48 2.83c-.158-.107-.398-.084-.533.05L2.88 3.948c-.134.136-.157.376-.052.534L3.94 6.13c.106.158.042.315-.147.35l-1.938.358c-.187.035-.34.22-.34.41v1.51c0 .19.153.375.34.41l1.94.356c.188.034.254.192.146.35L2.83 11.52c-.105.16-.082.398.053.533l1.067 1.066c.135.135.375.157.533.052l1.648-1.112c.158-.106.316-.04.35.147l.357 1.938c.035.188.22.342.41.342h1.508c.19 0 .377-.153.412-.342l.355-1.938c.035-.188.193-.255.352-.147l1.646 1.112c.158.105.4.083.535-.053l1.066-1.065c.134-.137.157-.376.05-.535l-1.11-1.648c-.108-.157-.042-.315.145-.35l1.94-.357c.187-.034.34-.22.34-.41V7.247c0-.19-.15-.376-.34-.41zM8 11.086c-1.7 0-3.082-1.378-3.082-3.08 0-1.7 1.38-3.08 3.082-3.08s3.082 1.378 3.082 3.08c0 1.702-1.38 3.08-3.082 3.08z" />
+				{presetSize === 'small' && (
+					<path d="M14.146 6.836l-1.94-.356c-.187-.035-.253-.192-.145-.35l1.112-1.648c.107-.158.084-.4-.05-.534l-1.067-1.066c-.135-.136-.377-.16-.535-.052L9.873 3.94c-.158.107-.316.04-.352-.146l-.354-1.94c-.035-.186-.22-.34-.412-.34H7.246c-.19 0-.375.154-.41.342L6.48 3.794c-.034.188-.192.254-.35.147L4.48 2.83c-.158-.107-.398-.084-.533.05L2.88 3.948c-.134.136-.157.376-.052.534L3.94 6.13c.106.158.042.315-.147.35l-1.938.358c-.187.035-.34.22-.34.41v1.51c0 .19.153.375.34.41l1.94.356c.188.034.254.192.146.35L2.83 11.52c-.105.16-.082.398.053.533l1.067 1.066c.135.135.375.157.533.052l1.648-1.112c.158-.106.316-.04.35.147l.357 1.938c.035.188.22.342.41.342h1.508c.19 0 .377-.153.412-.342l.355-1.938c.035-.188.193-.255.352-.147l1.646 1.112c.158.105.4.083.535-.053l1.066-1.065c.134-.137.157-.376.05-.535l-1.11-1.648c-.108-.157-.042-.315.145-.35l1.94-.357c.187-.034.34-.22.34-.41V7.247c0-.19-.15-.376-.34-.41zM8 11.086c-1.7 0-3.082-1.378-3.082-3.08 0-1.7 1.38-3.08 3.082-3.08s3.082 1.378 3.082 3.08c0 1.702-1.38 3.08-3.082 3.08z" />
+				)}
+				{presetSize === 'large' && (
+					<path d="M18 11a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 13c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6zm17.521-9.083l-3.896-1.104a14.154 14.154 0 0 0-1.042-2.5l1.958-3.542a.686.686 0 0 0-.104-.792L29.02 3.562a.678.678 0 0 0-.791-.125l-3.562 1.979a14.087 14.087 0 0 0-2.479-1.021L21.063.478A.688.688 0 0 0 20.422 0h-4.851c-.359 0-.554.279-.633.479l-1.125 3.917c-.866.268-1.694.602-2.479 1.021L7.771 3.438a.678.678 0 0 0-.791.125L3.563 6.979a.686.686 0 0 0-.105.792l1.958 3.542a14.154 14.154 0 0 0-1.042 2.5L.478 14.917a.686.686 0 0 0-.478.646v4.854a.686.686 0 0 0 .479.646l3.896 1.104c.27.876.639 1.707 1.062 2.5l-1.979 3.542a.687.687 0 0 0 .104.812l3.417 3.417a.679.679 0 0 0 .472.185.65.65 0 0 0 .32-.081l3.562-1.979c.785.419 1.613.773 2.479 1.042l1.125 3.896c.073.284.353.5.646.5h4.833a.687.687 0 0 0 .646-.5l1.125-3.896a14.206 14.206 0 0 0 2.479-1.042l3.562 1.979a.683.683 0 0 0 .792-.104l3.417-3.417a.685.685 0 0 0 .104-.812l-1.979-3.542a14.15 14.15 0 0 0 1.062-2.5l3.896-1.104a.686.686 0 0 0 .479-.646v-4.854a.684.684 0 0 0-.478-.646zM35 20.171l-3.648 1.034-.523.148-.16.52c-.23.747-.553 1.507-.989 2.323l-.257.482.266.477 1.864 3.336-3.057 3.057-3.345-1.858-.476-.264-.48.256a13.24 13.24 0 0 1-2.304.969l-.515.16-.15.518L20.166 35h-4.332l-1.061-3.673-.15-.518-.515-.16a13.24 13.24 0 0 1-2.304-.969l-.48-.256-.476.264-3.345 1.858-3.057-3.056 1.864-3.336.266-.477-.256-.481a13.082 13.082 0 0 1-.989-2.323l-.16-.52-.523-.148L1 20.171v-4.362l3.648-1.034.523-.148.16-.52c.245-.796.571-1.577.968-2.324l.255-.479-.263-.475-1.838-3.326L7.516 4.44l3.332 1.851.476.264.48-.256a13.085 13.085 0 0 1 2.304-.948l.516-.16.149-.519L15.828 1h4.343l1.055 3.672.149.519.516.16c.848.263 1.601.573 2.304.948l.48.256.476-.264 3.332-1.851 3.063 3.063-1.839 3.326-.263.475.255.479c.398.746.724 1.528.968 2.324l.16.52.523.148L35 15.808v4.363z" />
+				)}
 			</Icon>
 		);
 	},

diff --git a/src/components/Icon/SettingsIcon/examples/1.default.jsx b/src/components/Icon/SettingsIcon/examples/1.default.jsx
@@ -4,6 +4,12 @@ import { SettingsIcon } from '../../../../index';
 
 export default createClass({
 	render() {
-		return <SettingsIcon />;
+		return (
+			<div>
+				Small: <SettingsIcon />
+				<br />
+				Large: <SettingsIcon presetSize="large" />
+			</div>
+		);
 	},
 });