flag icons

플래그 아이콘

SVG로 선별된 모든 국가 국기 컬렉션과 더 쉬운 통합을 위한 CSS. 데모를 참조하세요.

설치하다

전체 프로젝트를 있는 그대로 다운로드하거나 npm 또는 Yarn을 통해 설치할 수 있습니다.

npm install flag-icons
# or
yarn add flag-icons

용법

먼저 CSS를 가져와야 합니다.

 import "/node_modules/flag-icons/css/flag-icons.min.css" ;

또는 CDN을 사용하세요.

 < link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css "
/>

텍스트와 함께 플래그 인라인을 사용하려면 빈 <span> 에 .fi 및 .fi-xx 클래스( xx 는 국가의 ISO 3166-1-alpha-2 코드임)를 추가하세요. 제곱된 버전 플래그를 갖고 싶다면 fis 클래스도 추가하세요. 예:

 < span class =" fi fi-gr " > </ span > < span class =" fi fi-gr fis " > </ span >

이것을 모든 요소에 적용할 수도 있지만, 이 경우 fi 대신 fib 사용해야 하며 설정은 완료됩니다. 그러면 다음 CSS 속성으로 올바른 배경이 추가됩니다.

 background-size : contain;
background-position : 50 % ;
background-repeat : no-repeat;

즉, 플래그는 요소의 중간에 표시되므로 올바른 크기인 4x3 비율을 수동으로 설정해야 하며, 제곱인 경우 flag-icon-squared 클래스도 추가해야 합니다.

개발

프로젝트를 복제한 후 yarn 실행하여 종속성을 설치하면 다음을 수행할 수 있습니다.

*.scss 파일을 빌드하려면

$ yarn build

localhost:8000 에서 제공하려면

$ yarn start

CSS 파일에 특정 국가만 포함하려면 _flag-icons-list.scss 파일에서 필요하지 않은 국가를 제거하고 다시 빌드하세요.

크레딧

• 이 프로젝트는 koppi의 멋진 SVG 플래그 컬렉션이 없으면 존재하지 않을 것입니다.
• npm에 flag-icons 이름을 제공한 Andrejs Abrickis에게 감사드립니다.