Next.js에서 IonIcons 사용방법

시작하기

app/layout.tsx

레이아웃에 아래 코드 추가

npm install ionicons

 

 

components/icon/IonIcon.tsx

아래 컴포넌트를 통해 TS 오류 해결(SVG를 컴포넌트로 사용)

import React from "react";

// ionicons 아이콘 객체를 React SVG 컴포넌트로 변환
export function IonIcon({ 
  icon, // ionicons 패키지에서 import한 아이콘 객체
  ...props // SVG 요소에 전달할 나머지 props (width, height, style 등)
}: { 
  icon: { svg?: string; name?: string } | any; // 아이콘 객체 타입 정의 (ionicons 타입 호환)
} & React.SVGProps<SVGSVGElement>) {
  const svgContent = (icon?.svg || icon || ""); // 아이콘 객체에서 SVG path 문자열 추출
  const isFullSVG = svgContent.trim().startsWith("<svg"); // 완전한 SVG 태그인지 확인 (현재 미사용)
  const isOutline = svgContent.includes("stroke") || svgContent.includes("outline") || icon?.name?.includes("outline"); // outline 스타일 아이콘인지 확인
  const defaultFill = props.fill !== undefined ? props.fill : (isOutline ? "none" : "currentColor"); // fill 색상 설정 (outline은 none, 일반은 currentColor)
  const defaultStroke = props.stroke !== undefined ? props.stroke : (isOutline ? "currentColor" : "none"); // stroke 색상 설정 (outline은 currentColor, 일반은 none)
  const defaultStrokeWidth = props.strokeWidth !== undefined ? props.strokeWidth : (isOutline ? "32" : "0"); // stroke 두께 설정 (outline은 32, 일반은 0)
  
  return (
    <svg
      {...props} // 전달받은 모든 SVG props 적용
      viewBox="0 0 512 512" // SVG 뷰박스 설정 (ionicons 표준 크기)
      width={props.width || "1em"} // 너비 설정 (기본값: 1em)
      height={props.height || "1em"} // 높이 설정 (기본값: 1em)
      fill={defaultFill} // fill 색상 적용
      stroke={defaultStroke} // stroke 색상 적용
      strokeWidth={defaultStrokeWidth} // stroke 두께 적용
      strokeLinecap={props.strokeLinecap || "round"} // stroke 끝 모양 설정 (기본값: round)
      strokeLinejoin={props.strokeLinejoin || "round"} // stroke 연결 모양 설정 (기본값: round)
      dangerouslySetInnerHTML={{ __html: svgContent }} // SVG path 데이터를 HTML로 삽입
    />
  );
}

 

 

사용 예시

import { flameOutline } from "ionicons/icons";
import { IonIcon } from "@/components/icon/IonIcon";

<IonIcon icon={flameOutline} style={{ width: "16px", height: "16px" }} />