diff --git a/semcore/icon/src/Icon.tsx b/semcore/icon/src/Icon.tsx index 28fd04cae0..ae92c60155 100644 --- a/semcore/icon/src/Icon.tsx +++ b/semcore/icon/src/Icon.tsx @@ -52,6 +52,19 @@ export type IconProps = { * @default 4 */ scaleIndent?: number; + + /** + * Predefined `stroke-width` + * @default `regular` + */ + weight?: 'regular' | 'bold'; + + /** + * CSS `stroke-width` property + * + * @internal + */ + strokeWidth?: string; }; function calculateIndentStyles(props: IconProps, scaleIndent: number) { @@ -85,6 +98,8 @@ function Icon({ ml, mr, mx, + weight, + strokeWidth, ...props }: React.SVGProps & IconProps, ref: React.Ref) { const SIcon = 'svg'; @@ -95,6 +110,7 @@ function Icon({ const sstyles = sstyled(styles); const { className, style } = sstyles.cn('SIcon', { 'use:color': color, + 'use:strokeWidth': strokeWidth ?? (weight === 'bold' ? '1.85px' : '1.5px'), }); const indentStyles: React.CSSProperties = React.useMemo(() => { diff --git a/semcore/icon/src/style/icon.shadow.css b/semcore/icon/src/style/icon.shadow.css index bfad5ec950..aa1bd3597c 100644 --- a/semcore/icon/src/style/icon.shadow.css +++ b/semcore/icon/src/style/icon.shadow.css @@ -10,4 +10,10 @@ SIcon { &[color] { color: var(--color); } + + &[strokeWidth] { + path, circle, line { + stroke-width: var(--strokeWidth); + } + } } diff --git a/semcore/icon/svg/icon/Check/m.svg b/semcore/icon/svg/icon/Check/m.svg index 40cb435f77..6676a63d76 100644 --- a/semcore/icon/svg/icon/Check/m.svg +++ b/semcore/icon/svg/icon/Check/m.svg @@ -1,5 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/semcore/icon/svg/icon/Close/m.svg b/semcore/icon/svg/icon/Close/m.svg index d584ab62f6..3f50f3a96f 100644 --- a/semcore/icon/svg/icon/Close/m.svg +++ b/semcore/icon/svg/icon/Close/m.svg @@ -1,4 +1,4 @@ - - - \ No newline at end of file + + + + diff --git a/semcore/icon/svg/icon/Info/m.svg b/semcore/icon/svg/icon/Info/m.svg index 9b0a442ac0..5fc68d82d4 100644 --- a/semcore/icon/svg/icon/Info/m.svg +++ b/semcore/icon/svg/icon/Info/m.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/semcore/icon/svg/icon/MathPlus/m.svg b/semcore/icon/svg/icon/MathPlus/m.svg index a3068bdff3..0c812d8369 100644 --- a/semcore/icon/svg/icon/MathPlus/m.svg +++ b/semcore/icon/svg/icon/MathPlus/m.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/semcore/icon/svg/icon/Search/m.svg b/semcore/icon/svg/icon/Search/m.svg index 5a17897718..a396319fe0 100644 --- a/semcore/icon/svg/icon/Search/m.svg +++ b/semcore/icon/svg/icon/Search/m.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/semcore/icon/svg/icon/Warning/m.svg b/semcore/icon/svg/icon/Warning/m.svg index 756ed89723..ee974d1f6e 100644 --- a/semcore/icon/svg/icon/Warning/m.svg +++ b/semcore/icon/svg/icon/Warning/m.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + + + + + + diff --git a/stories/components/icon/tests/Icon.stories.tsx b/stories/components/icon/tests/Icon.stories.tsx index d2fec6f770..1e3e50ec3f 100644 --- a/stories/components/icon/tests/Icon.stories.tsx +++ b/stories/components/icon/tests/Icon.stories.tsx @@ -10,6 +10,7 @@ import IconOtherElementsExample from './examples/icons_in_other_elements_example import IconPayExample from './examples/icons_pay'; import IconPlatformExample from './examples/icons_platform'; import IconTypesExample from './examples/icons_regular'; +import StrokeWidthExample, { defaultProps as StrokeWidthProps } from './examples/stroke-width'; import { playWrapper } from '../../../utils/playWrapper'; const meta: Meta = { @@ -45,6 +46,31 @@ export const IconPlatform: StoryObj = { play: playWrapper(iconPlatform), }; +export const StrokeWidth: StoryObj = { + render: StrokeWidthExample, + args: StrokeWidthProps, + argTypes: { + regularWidth: { + control: { + type: 'number', + step: 0.05, + }, + }, + boldWidth: { + control: { + type: 'number', + step: 0.05, + }, + }, + customWidth: { + control: { + type: 'number', + step: 0.05, + }, + }, + }, +}; + export const IconMarginProps: StoryObj = { render: IconPropsExample, argTypes: { diff --git a/stories/components/icon/tests/examples/stroke-width.tsx b/stories/components/icon/tests/examples/stroke-width.tsx new file mode 100644 index 0000000000..bb725e6829 --- /dev/null +++ b/stories/components/icon/tests/examples/stroke-width.tsx @@ -0,0 +1,92 @@ +import CheckM from '@semcore/icon/Check/m'; +import CloseM from '@semcore/icon/Close/m'; +import InfoM from '@semcore/icon/Info/m'; +import MathPlusM from '@semcore/icon/MathPlus/m'; +import SearchM from '@semcore/icon/Search/m'; +import WarningM from '@semcore/icon/Warning/m'; +import { Flex } from '@semcore/ui/base-components'; +import { Text } from '@semcore/ui/typography'; +import React from 'react'; + +const icons = [ + { + text: 'Keywords', + icon: InfoM, + }, + { + text: 'Limit reached', + icon: WarningM, + }, + { + text: 'Keywords', + icon: SearchM, + }, + { + text: 'Keywords', + icon: MathPlusM, + }, + { + text: 'Keywords', + icon: CloseM, + }, + { + text: 'Keywords', + icon: CheckM, + }, +]; + +const IconList = (props: { cl: 'bold' | 'regular' | 'custom' } & StrokeWidthProps) => { + return ( + + + {props.cl} + + + { + icons.map((el, ind) => { + const Icon = el.icon; + return ( + + {el.text} + + + ); + }) + } + + + ); +}; + +const Demo = (props: StrokeWidthProps) => { + return ( + + + + + + ); +}; + +export type StrokeWidthProps = { + regularWidth: number; + boldWidth: number; + customWidth: number; +}; + +export const defaultProps: StrokeWidthProps = { + regularWidth: 1.5, + boldWidth: 1.85, + customWidth: 1.5, +}; + +Demo.defaultProps = defaultProps; + +export default Demo;