Hi i have odd issue with next i have page that i want pass in prop an icon that result in error

Question

hi i have odd issue i have route (that logic come from the layout) that look like this https://pastebin.com/KbKNAYGL the relevent code this my error

│ Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <svg />. Did you accidentally export a JSX literal instead of a component?
│ at eval (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItem.mjs:41:96)
│ at ul
│ at SidebarItemGroup (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItemGroup.mjs:15:29)
│ at div
│ at SidebarItems (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItems.mjs:13:25)
│ at div
│ at nav
│ at SidebarComponent (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/Sidebar.mjs:27:29)
│ at aside
│ at div
│ at ClickOutside (webpack-internal:///(ssr)/../../packages/ui/src/Common/Events/ClickOutside.tsx:10:25)
│ at SidebarArea (webpack-internal:///(ssr)/../../packages/ui/src/Backoffice/Sidebar/index.tsx:20:24)
│ at div
│ at DefaultLayout (webpack-internal:///(ssr)/../../packages/ui/src/Backoffice/Layouts/DefaultLaout.tsx:12:26)
│ at Lazy

My question what is the issue can how i can workaround it (dont want build big case of string to icon

Sun bear · Answer

the icon prop should be of type React.ReactNode, I have never worked with react-icons but with lucide it's something like this:

// src/components/button-with-icon.tsx
type ButtonWithIconProps = {
  icon: React.ReactNode
} & React.HTMLAttributes<HTMLButtonElement>

export default function ButtonWithIcon({ icon, children, ...props }: ButtonWithIconProps) {
  return <button {...props}>{icon}{children}</button>
}

import { MenuIcon } from "lucide-react"

<ButtonWithIcon
  icon={<MenuIcon />}
/>

Hopefully this helps

Hi i have odd issue with next i have page that i want pass in prop an icon that result in error

1 Reply