If the svg has a single path, simply copy the path's d attribute
Icon
Chakra provides a set of commonly used interface icons you can use in your project
Props#
Icon props#
| Name | Type | Default | Description |
|---|---|---|---|
viewBox | string | 0 0 24 24 | The viewBox of the icon. |
boxSize | string | 1em | The size (width and height) of the icon. |
color | string | currentColor | The color of the icon. |
focusable | boolean | false | Denotes that the icon is not an interactive element, and only used for presentation. |
role | presentation, img | The html role of the icon. | |
children | React.ReactNode | The Path or Group of the icon |
createIcon options#
d
dDescription
Type
stringdefaultProps
defaultPropsDescription
Default props automatically passed to the component; overwritable
Type
IconPropsdisplayName
displayNameDescription
The display name useful in the dev tools
Type
stringpath
pathDescription
The svg path or group element
Type
React.ReactElement | React.ReactElement[]viewBox
viewBoxDescription
The icon svg viewBox
Type
stringDefault
"0 0 24 24"Props#
Icon props#
| Name | Type | Default | Description |
|---|---|---|---|
viewBox | string | 0 0 24 24 | The viewBox of the icon. |
boxSize | string | 1em | The size (width and height) of the icon. |
color | string | currentColor | The color of the icon. |
focusable | boolean | false | Denotes that the icon is not an interactive element, and only used for presentation. |
role | presentation, img | The html role of the icon. | |
children | React.ReactNode | The Path or Group of the icon |
createIcon options#
d
dDescription
If the svg has a single path, simply copy the path's d attribute
Type
stringdefaultProps
defaultPropsDescription
Default props automatically passed to the component; overwritable
Type
IconPropsdisplayName
displayNameDescription
The display name useful in the dev tools
Type
stringpath
pathDescription
The svg path or group element
Type
React.ReactElement | React.ReactElement[]viewBox
viewBoxDescription
The icon svg viewBox
Type
stringDefault
"0 0 24 24"