react-circle-flags 만국기

react-circle-flags 만국기

react-circle-flags는 React 애플리케이션에서 다양한 국가의 국기를 원형(Circle) 아이콘 형태로 쉽게 사용할 수 있게 해주는 오픈소스 라이브러리입니다. 보통 국가 선택 드롭다운이나 사용자 프로필 등에 자주 사용됩니다.

주요 특징

• 원형 형태의 깔끔한 국기 아이콘
• SVG 기반이라 고해상도에서도 선명
• React 컴포넌트 형태로 간편한 사용
• 다양한 크기 지원

설치 방법

npm install react-circle-flags

기본 사용법

import CircleFlag from 'react-circle-flags';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <CircleFlag countryCode="us" height="48" />
      <CircleFlag countryCode="kr" height="48" />
      <CircleFlag countryCode="jp" height="48" />
    </div>
  );
}

주요 Props

Prop	설명	예시
countryCode	ISO 3166-1 alpha-2 코드 (소문자)	"us", "kr", "jp"
height	SVG 이미지 높이 (px, 숫자 또는 문자열)	24, "32"

※ ISO 코드 예:

• 🇰🇷 한국: "kr"
• 🇯🇵 일본: "jp"
• 🇺🇸 미국: "us"
• 🇫🇷 프랑스: "fr"
• 🇧🇷 브라질: "br"

---

커스텀 스타일 예시

<CircleFlag countryCode="fr" height="40" style={{ border: '2px solid #ccc' }} />

예시: 국가 선택 드롭다운

import { useState } from 'react';
import CircleFlag from 'react-circle-flags';

const countries = [
  { code: 'us', name: 'United States' },
  { code: 'kr', name: 'South Korea' },
  { code: 'jp', name: 'Japan' },
];

function CountrySelector() {
  const [selected, setSelected] = useState('us');

  return (
    <div>
      <select onChange={e => setSelected(e.target.value)} value={selected}>
        {countries.map(c => (
          <option key={c.code} value={c.code}>
            {c.name}
          </option>
        ))}
      </select>
      <CircleFlag countryCode={selected} height="40" />
    </div>
  );
}

 

https://www.npmjs.com/package/react-circle-flags

react-circle-flags

https://on-the-edge-cloud.github.io/react-circle-flags/gallery

Gallery