Add Send icon (#4408)

.changeset/nine-days-train.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-icons': minor
+---
+
+- add Send16 and Send24 icons

packages/base/Icons/src/Icon/Send16.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgSend16',
+})
+const SvgSend16 = forwardRef(function SvgSend16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M1.348 2.656c-.478-.86.442-1.82 1.321-1.38L15.22 7.55a.498.498 0 0 1 .135.803.498.498 0 0 1-.135.096L2.67 14.724c-.88.44-1.799-.521-1.321-1.38L4.317 8l-2.97-5.344Zm.874-.486L13.882 8l-11.66 5.83L5.183 8.5h2.793a.5.5 0 0 0 0-1H5.183L2.222 2.17Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgSend16.displayName = 'SvgSend16'
+export default SvgSend16

packages/base/Icons/src/Icon/Send24.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgSend24',
+})
+const SvgSend24 = forwardRef(function SvgSend24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M1.848 3.156c-.478-.86.442-1.82 1.321-1.38l19.55 9.775A.496.496 0 0 1 23 12a.497.497 0 0 1-.28.449L3.17 22.225c-.88.44-1.8-.521-1.322-1.38L6.76 12 1.848 3.156Zm.874-.486L21.382 12l-18.66 9.33 4.905-8.83h4.338a.5.5 0 1 0 0-1H7.627L2.722 2.67Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgSend24.displayName = 'SvgSend24'
+export default SvgSend24

packages/base/Icons/src/Icon/SendResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Send16 from './Send16'
+import Send24 from './Send24'
+import type { Props } from './Send16'
+
+const SendResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Send16 {...props} />,
+    },
+    <Send24 {...props} />
+  ) as JSX.Element
+}
+
+export default SendResponsive

packages/base/Icons/src/Icon/index.ts

@@ -332,6 +332,8 @@ export { default as ScheduledPayment16 } from './ScheduledPayment16'
 export { default as ScheduledPayment24 } from './ScheduledPayment24'
 export { default as Search16 } from './Search16'
 export { default as Search24 } from './Search24'
+export { default as Send16 } from './Send16'
+export { default as Send24 } from './Send24'
 export { default as Services16 } from './Services16'
 export { default as Services24 } from './Services24'
 export { default as Settings16 } from './Settings16'
@@ -592,6 +594,7 @@ export { default as ResourcesResponsive } from './ResourcesResponsive'
 export { default as RotateResponsive } from './RotateResponsive'
 export { default as ScheduledPaymentResponsive } from './ScheduledPaymentResponsive'
 export { default as SearchResponsive } from './SearchResponsive'
+export { default as SendResponsive } from './SendResponsive'
 export { default as ServicesResponsive } from './ServicesResponsive'
 export { default as SettingsResponsive } from './SettingsResponsive'
 export { default as ShareResponsive } from './ShareResponsive'