Add sparkle icon (#4598)

.changeset/ninety-shoes-thank.md

@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-icons': minor
+---
+
+### Icon
+
+- add `Sparkle16` and `Sparkle24` icons

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

@@ -0,0 +1,62 @@
+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: 'PicassoSvgSparkle16',
+})
+const SvgSparkle16 = forwardRef(function SvgSparkle16(
+  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 d='M11.333 8.667A6.551 6.551 0 0 1 9.5 5 6.478 6.478 0 0 1 4 10.5 6.478 6.478 0 0 1 9.5 16a6.478 6.478 0 0 1 5.5-5.5 6.551 6.551 0 0 1-3.667-1.833ZM3.985 4.004A3.572 3.572 0 0 1 2.977 2 3.572 3.572 0 0 1 0 5.006c.763.1 1.472.448 2.015.99A3.572 3.572 0 0 1 3.023 8c.099-.752.436-1.454.962-2.004A3.528 3.528 0 0 1 6 5.006a3.642 3.642 0 0 1-2.015-1.002ZM13.996 1.992A3.6 3.6 0 0 1 13 0a3.6 3.6 0 0 1-.996 1.992A3.6 3.6 0 0 1 10 3c.76.103 1.463.453 2.004.996A3.6 3.6 0 0 1 13 6a3.6 3.6 0 0 1 .996-2.004A3.492 3.492 0 0 1 16 3a3.6 3.6 0 0 1-2.004-1.008Z' />
+    </svg>
+  )
+})
+
+SvgSparkle16.displayName = 'SvgSparkle16'
+export default SvgSparkle16

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

@@ -0,0 +1,62 @@
+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: 'PicassoSvgSparkle24',
+})
+const SvgSparkle24 = forwardRef(function SvgSparkle24(
+  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 d='M18 13a8.963 8.963 0 0 1-2.5-5A8.837 8.837 0 0 1 8 15.5a8.837 8.837 0 0 1 7.5 7.5 8.837 8.837 0 0 1 7.5-7.5 8.875 8.875 0 0 1-5-2.5ZM5.33 7.67A4.83 4.83 0 0 1 4 5a4.83 4.83 0 0 1-1.33 2.67A4.8 4.8 0 0 1 0 9a4.8 4.8 0 0 1 2.67 1.33A4.83 4.83 0 0 1 4 13a4.7 4.7 0 0 1 4-4 4.8 4.8 0 0 1-2.67-1.33ZM21.667 2.333A4.211 4.211 0 0 1 20.5 0a4.211 4.211 0 0 1-1.167 2.333A4.13 4.13 0 0 1 17 3.5a4.13 4.13 0 0 1 2.333 1.167A4.211 4.211 0 0 1 20.5 7a4.211 4.211 0 0 1 1.167-2.333A4.13 4.13 0 0 1 24 3.5a4.13 4.13 0 0 1-2.333-1.167Z' />
+    </svg>
+  )
+})
+
+SvgSparkle24.displayName = 'SvgSparkle24'
+export default SvgSparkle24

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

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

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

@@ -359,6 +359,8 @@ export { default as SoundOff16 } from './SoundOff16'
 export { default as SoundOff24 } from './SoundOff24'
 export { default as SoundOn16 } from './SoundOn16'
 export { default as SoundOn24 } from './SoundOn24'
+export { default as Sparkle16 } from './Sparkle16'
+export { default as Sparkle24 } from './Sparkle24'
 export { default as SpecialGroup16 } from './SpecialGroup16'
 export { default as SpecialGroup24 } from './SpecialGroup24'
 export { default as Star16 } from './Star16'
@@ -612,6 +614,7 @@ export { default as SlackResponsive } from './SlackResponsive'
 export { default as SortResponsive } from './SortResponsive'
 export { default as SoundOffResponsive } from './SoundOffResponsive'
 export { default as SoundOnResponsive } from './SoundOnResponsive'
+export { default as SparkleResponsive } from './SparkleResponsive'
 export { default as SpecialGroupResponsive } from './SpecialGroupResponsive'
 export { default as StarResponsive } from './StarResponsive'
 export { default as StarSolidResponsive } from './StarSolidResponsive'