How can I add a square box around a navbar icon, similar to the FumaDocs site?

[kakarj]

I want it similar to the FumaDocs site.

[fuma-nama]

In your loader’s icon option, wrap the icon in a div

[kakarj]

I wanted it to look like the FumaDocs design. I copied the FumaDocs code, but it's giving me an error in production:

icon.tsx:

source.ts:

cn.ts:
export { twMerge as cn } from 'tailwind-merge';

error:

[fuma-nama]

it's probably other things that caused the error instead of icon handler in loader, mind to provide a reproduction via GitHub or CodeSandbox?

[Gitstar-OC]

Is it solved do you need help ?

[Gitstar-OC]

Do it like this below is the code for it and other variations which are used on my website https://mindect.vercel.app/learn/sl

import { CircuitBoard, BrainCircuit, BrainCog, Sigma, X, ChartColumn } from "lucide-react";
import { cn } from "@/lib/utils"

export function ProbabilityIcon({className}) { 
  return (
    <div className={cn(`bg-gradient-to-b from-[#FF6200] to-[#0F0C05] h-8 w-8 rounded-sm` , className)}>
      <ChartColumn className={cn(`text-[#FFC982] w-full  h-[90%] my-[5%]` , className)} />
    </div>
  );
}

And then use it in docs/layout.tsx as given below

<RootToggle
              options={[
                {
                  title: "Algs",
                  description: "Learning Algorithms",
                  url: "/learn/algs",
                  icon: <AlgsIcon className="m-0" />,
                }]} after importing the icons 

[Gitstar-OC]

Don't try to copy all the things, most of the time it throws an error due to things like package versions and compiler.

[kakarj]

Thanks for your help! I'm still facing the same error. I'm working on an open source non-profit ai + education project similar to Mindect (I liked your work there). Can you help me fix this? If interested join our Discord: https://discord.gg/snCZb2fc :)