Shadcn UI와 Icons

 

🌻 나는 shadcn/ui를 굉장히 좋아한다. 혼자 개발한다면 무조건 shadcn/ui를 쓰고 싶다.

 

🌻 이번 포스팅에서는 shadcn ui에서 icon을 쓰는 방법을 보여주고자 한다.

 

🌻 일단 먼저, Lucide-React icons를 쓰는 경우

npm install lucide-react

 

메일 아이콘과 Send Mail이라는 텍스트가 적힌 버튼을 만들어보자.

import { Mail } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function DemoIcon() {
  return (
    <Button>
      <Mail className="mr-2 h-4 w-4" />
      Send Mail
    </Button>
  )
}

 

🌻 heroicons(SVG) 쓰는 경우

npm install @heroicons/react

 

위와 같은 버튼을 아래의 코드로 만들 수 있다.

import { Button } from "@/components/ui/button"

export default function DemoIcon() {
  return (
    <Button>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="mr-1 w-4 h-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      Send Mail
    </Button>
  )
}

 

svg도 어렵게 생각할 것 없이 className으로 사이즈 잘 조절하면 된다.