Warnings when passing an Icon as a prop

[about-hector]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [X] lucide-react
• [ ] lucide-react-native
• [ ] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.301.0

Browser

• [ ] Chrome/Chromium
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] iOS Safari
• [ ] Opera
• [X] Other/not relevant

Operating system

• [ ] Windows
• [ ] Linux
• [ ] macOS
• [X] Other/not relevant

Description

I tried to create a reusable card component that, among other things, displays an icon.

I'll simplify the logic ignoring everything that's not relevant.

export function Card({
 icon: Icon
 }) {
 return (
 <div>
     <Icon className='some-classes'>
 </div>
 )
 }

Here we use an icon prop and we alias it when destructuring to have some default classes applied to whichever icon I decide to use.

then I use it like this on a page:

import {Popsicle} from 'lucide-react'

export default function Page() {
return (
     <Card icon={Popsicle} />
)
}

basically we pass it by name instead of passing it like because by doing so we are sure the default classes are applied.

when doing so and loading the page, everything is displayed as expected frontend wise but I get these warnings in the console (using RSC)

Warning: Invalid DOM property `clip-rule`. Did you mean `clipRule`?
    at path
    at svg
    at a
    at div
    at div
    at div
    at section
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
    at Lazy
    at section
    at main
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
    at Lazy
    at f (webpack-internal:///(ssr)/./node_modules/next-themes/dist/index.module.js:21:24)
    at $ (webpack-internal:///(ssr)/./node_modules/next-themes/dist/index.module.js:18:62)
    at ContextProvider (webpack-internal:///(ssr)/./app/ContextProvider.tsx:10:28)
    at Lazy
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:296:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:155:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:99:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:421:13)
    at Lazy
    at Lazy
    at /Users/HKT/developer-portfolio/ettoremihaili-dev/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:381577
    at /Users/HKT/developer-portfolio/ettoremihaili-dev/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:381577
    at ServerInsertedHTMLProvider (/Users/HKT/developer-portfolio/ettoremihaili-dev/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:17605)

why is it so? I never used/defined clip-rule and anything, but it still warns me as if I did. I know it's probably some node_modules problem, but why does it happen?

Steps to reproduce

see above, will post a codesandbox if needed

Checklist

• [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[ericfennis]

Can't reproduce this issue. This is probably a .next directory caching issue.