feat: Icon updates (#559)

Author: dogmar

src/components/icons/BlockedIcon.tsx

@@ -0,0 +1,20 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color, secondaryColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m6.25 3v6 1 2.5h3.5v-2.5-1-6z"
+      fill={secondaryColor || 'transparent'}
+    />
+    <path
+      d="m11.313721 0h-6.627441l-4.68628 4.686279v6.627441l4.686279 4.686279h6.627441l4.686279-4.686279v-6.627441zm-2.563721 11.5h-1.5v-1.500061h1.5zm0-6.75v4.25h-1.5v-5h1.5z"
+      fill={color}
+    />
+  </svg>
+))

src/components/icons/ShieldLockIcon.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from 'styled-components'
+
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color, secondaryColor }) => {
+  const theme = useTheme()
+
+  return (
+    <svg
+      width={size}
+      fill="none"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m8 11.2c-.6 0-1-.4-1-1v-2c-.6-.4-1-1-1-1.7 0-1.1.9-2 2-2s2 .9 2 2c0 .7-.4 1.4-1 1.7v2c0 .6-.4 1-1 1z"
+        fill={secondaryColor || theme.colors['fill-one']}
+      />
+      <path
+        d="m15 7.3c0 4-3 7.8-7 8.7-4-.9-7-4.7-7-8.7v-4.4l7-2.9 7 2.9zm-6.2.8c.6-.3 1-.9 1-1.6 0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8c0 .7.4 1.3 1 1.6v2.2c0 .4.4.7.8.7s.8-.3.8-.8z"
+        fill={color}
+      />
+    </svg>
+  )
+})

src/components/icons/createIcon.tsx

@@ -4,25 +4,25 @@ import {
   type IconProps as HonorableIconProps,
   useTheme,
 } from 'honorable'
-import PropTypes from 'prop-types'
 
 type IconBaseProps = {
   size?: number | string
   color?: string
   fullColor?: boolean
+  secondaryColor?: string
 }
 
 export type IconProps = HonorableIconProps & IconBaseProps
 
-const propTypes = {
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  color: PropTypes.string,
-  fullColor: PropTypes.bool,
-}
-
 function createIcon(render: (props: IconBaseProps) => ReactNode) {
   function IconRef(
-    { size = 16, color = 'currentColor', fullColor, ...props }: IconProps,
+    {
+      size = 16,
+      color = 'currentColor',
+      fullColor,
+      secondaryColor,
+      ...props
+    }: IconProps,
     ref: Ref<any>
   ) {
     const theme = useTheme()
@@ -35,15 +35,18 @@ function createIcon(render: (props: IconBaseProps) => ReactNode) {
         {...{ '& *': { transition: 'stroke 150ms linear, fill 150ms linear' } }}
         {...props}
       >
-        {render({ size, color: workingColor, fullColor })}
+        {render({
+          size,
+          color: workingColor,
+          secondaryColor,
+          fullColor,
+        })}
       </HonorableIcon>
     )
   }
 
   const ForwardedIcon = forwardRef(IconRef)
 
-  ForwardedIcon.propTypes = propTypes
-
   return ForwardedIcon
 }
 

src/icons.ts

@@ -10,6 +10,7 @@ export { default as ArrowTopRightIcon } from './components/icons/ArrowTopRightIc
 export { default as AwsLogoIcon } from './components/icons/AwsLogoIcon'
 export { default as AzureLogoIcon } from './components/icons/AzureLogoIcon'
 export { default as BellIcon } from './components/icons/BellIcon'
+export { default as BlockedIcon } from './components/icons/BlockedIcon'
 export { default as BookIcon } from './components/icons/BookIcon'
 export { default as BotIcon } from './components/icons/BotIcon'
 export { default as BriefcaseIcon } from './components/icons/BriefcaseIcon'
@@ -141,6 +142,7 @@ export { default as SearchIcon } from './components/icons/SearchIcon'
 export { default as SendMessageIcon } from './components/icons/SendMessageIcon'
 export { default as ServersIcon } from './components/icons/ServersIcon'
 export { default as ShieldOutlineIcon } from './components/icons/ShieldOutlineIcon'
+export { default as ShieldLockIcon } from './components/icons/ShieldLockIcon'
 export { default as ShipIcon } from './components/icons/ShipIcon'
 export { default as SirenIcon } from './components/icons/SirenIcon'
 export { default as SlackLogoIcon } from './components/icons/SlackLogoIcon'

src/stories/Icons.stories.tsx

@@ -25,6 +25,21 @@ export default {
         type: 'select',
       },
     },
+    secondaryColor: {
+      options: [
+        '',
+        'fill-zero',
+        'fill-one',
+        'fill-two',
+        'fill-three',
+        'black',
+        'white',
+        'transparent',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
   },
 }
 
@@ -53,13 +68,19 @@ const AppIcon = styled.div<{ $backgroundColor: string }>(
   })
 )
 
-function Template({ backgroundColor, ...args }: any) {
+function Template({ backgroundColor, color, secondaryColor, ...args }: any) {
   const theme = useTheme()
   const bgColor =
     (typeof (theme.colors as any)[backgroundColor] === 'string' &&
       (theme.colors as any)[backgroundColor]) ||
     backgroundColor
 
+  // @ts-ignore
+  color = theme.colors[color] ?? (color || undefined)
+  secondaryColor =
+    // @ts-ignore
+    theme.colors[secondaryColor as string] ?? (secondaryColor || undefined)
+
   return (
     <div
       style={{
@@ -74,7 +95,7 @@ function Template({ backgroundColor, ...args }: any) {
           $backgroundColor={bgColor}
         >
           <div style={{ justifySelf: 'flex-end' }}>
-            {createElement(icon as any, { ...args })}
+            {createElement(icon as any, { color, secondaryColor, ...args })}
           </div>
           <span
             dangerouslySetInnerHTML={{