Merge pull request #635 from devtron-labs/feat/icon-stroke-width

feat: Icon - remove strokeWidth prop, add dynamic stroke-width based on size

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.5",
+    "version": "1.9.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -100,7 +100,7 @@ export const DeleteCINodeButton = ({
                 showAriaLabelInTippy
                 onClick={onClickDeleteShowModal}
                 style={ButtonStyleType.negativeGrey}
-                icon={<Icon name="ic-delete" color={null} strokeWidth={1} size={12} />}
+                icon={<Icon name="ic-delete" color={null} size={12} />}
                 disabled={disabled}
                 showTooltip
                 tooltipProps={{

src/Common/DeleteCINodeButton/DeleteCINodeButton.tsx

@@ -18,6 +18,7 @@ import { ConditionalWrap } from '@Common/Helper'
 import { Tooltip } from '@Common/Tooltip'
 
 import { IconBaseProps } from './types'
+import { ICON_STROKE_WIDTH_MAP } from './constants'
 
 import './styles.scss'
 
@@ -27,7 +28,7 @@ const conditionalWrap = (tooltipProps: IconBaseProps['tooltipProps']) => (childr
     </Tooltip>
 )
 
-export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color, strokeWidth }: IconBaseProps) => {
+export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: IconBaseProps) => {
     const IconComponent = iconMap[name]
 
     if (!IconComponent) {
@@ -37,9 +38,13 @@ export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color, stroke
     return (
         <ConditionalWrap condition={!!tooltipProps?.content} wrap={conditionalWrap(tooltipProps)}>
             <IconComponent
-                className={`icon-dim-${size} ${color ? 'icon-component' : ''} dc__no-shrink`}
-                style={color ? { ['--iconColor' as string]: `var(--${color})` } : {}}
-                strokeWidth={strokeWidth}
+                className={`icon-dim-${size} ${color ? 'icon-component-color' : ''} ${ICON_STROKE_WIDTH_MAP[size] ? 'icon-component-stroke-width' : ''}  dc__no-shrink`}
+                style={{
+                    ...(color ? { ['--iconColor' as string]: `var(--${color})` } : {}),
+                    ...(ICON_STROKE_WIDTH_MAP[size]
+                        ? { ['--strokeWidth' as string]: ICON_STROKE_WIDTH_MAP[size] }
+                        : {}),
+                }}
             />
         </ConditionalWrap>
     )

src/Shared/Components/Icon/IconBase.tsx

@@ -0,0 +1,6 @@
+import { IconBaseProps } from './types'
+
+export const ICON_STROKE_WIDTH_MAP: Partial<Record<IconBaseProps['size'], number>> = {
+    '10': 1,
+    '12': 1,
+}

src/Shared/Components/Icon/constants.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.icon-component {
+.icon-component-color {
     &:not([data-style-override='false']) {
         :where([stroke^='#']:not([data-style-override='false'])) {
             stroke: var(--iconColor);
@@ -24,3 +24,9 @@
         }
     }
 }
+
+.icon-component-stroke-width {
+    :where([stroke-width]) {
+        stroke-width: var(--strokeWidth);
+    }
+}

src/Shared/Components/Icon/styles.scss

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { FC, SVGAttributes, SVGProps } from 'react'
+import { FC, SVGProps } from 'react'
 
 import { TooltipProps } from '@Common/Tooltip/types'
 
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
 
-export interface IconBaseProps extends Pick<SVGAttributes<SVGSVGElement>, 'strokeWidth'> {
+export interface IconBaseProps {
     /** The name of the icon to render. */
     name: keyof IconMap
     /** The map containing all available icons. */