Templarian / MaterialDesign-React

Dist for Material Design Icons React Component for JS/TypeScript
https://materialdesignicons.com
MIT License
139 stars 20 forks source link

Cannot assign to read only property 'width' of object '#<Object>' icon #75

Open prostgles opened 1 year ago

prostgles commented 1 year ago

If size is specified together with a read only style the component breaks.

The code bellow will produce this error: Cannot assign to read only property 'width' of object '#<Object>' icon

App.tsx

const fixedStyle = { color: "red" } as const;

export function SomeComponent(){
  return <Icon path={mdiCheck} style={fixedStyle} size={1} />
}

This issue seems to be triggered by mutating the style object in Icon.tsx L31

sbitproz commented 8 months ago

I'm experience this too.

@react-refresh:267 React Router caught the following error during render TypeError: Cannot assign to read only property 'width' of object '#<Object>'
    at Icon.tsx:31:13
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performSyncWorkOnRoot (react-dom.development.js:26096:20) 

image

Hope this extra info helps.