ChakraUI React import Module not found: Can't resolve '@public/icons'

Question

I have found similar questions here on stackoverflow and none of it helped to solve my issue

I have a icons.js file in public where i export various icons to the pages

And on the page i import that particular file using

import { FastFeedbackIcon } from '@public/icons';

i have declared jsconfig.json file for public folder

And here is the error i am getting on the console & browser

./pages/index.js:14:0
Module not found: Can't resolve '@public/icons'


12 | import { useAuth } from '@/lib/auth';
13 | import { auth } from 'firebase';
> 14 | import { FastFeedbackIcon } from '@public/icons';

And here is the public/icons.js file

import { createIcon } from '@chakra-ui/icons';
export const FastFeedbackIcon = createIcon({
  displayName: 'FastFeedbackIcon',
  viewBox: '0 0 46 32',
  path: (
    <path
      d="M19.557.113C11.34.32 9.117 8.757 9.03 12.95c1.643-2.67 4.62-3.08 6.931-3.08 2.825.085 10.27.205 17.458 0C40.61 9.663 44.802 3.28 46 .112c-5.391-.085-18.228-.205-26.443 0zM14.422 14.234C3.332 14.234-.468 24.76.045 31.948c3.594-6.418 7.617-7.53 9.243-7.445h6.675c5.956 0 11.039-6.846 12.836-10.27H14.422z"
      fill="currentColor"
    />
  )
});

And This is the jsconfig.json file

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/pages/*": ["pages/*"],
      "@/styles/*": ["styles/*"],
      "@/utils/*": ["utils/*"],
      "@/public/*": ["public/*"]
    }
  }
}

Answer 1

from '@public/icons';

to

from '@/public/icons';