https://github.com/smucode/react-world-flags

Easy to use SVG flags of the world for react
https://github.com/smucode/react-world-flags

flags react reactjs svg svg-flags world

Last synced: 4 months ago
JSON representation

Easy to use SVG flags of the world for react

• Host: GitHub
• URL: https://github.com/smucode/react-world-flags
• Owner: smucode
• License: mit
• Created: 2017-04-14T19:59:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-09T04:14:22.000Z (11 months ago)
• Last Synced: 2024-08-11T16:20:50.396Z (4 months ago)
• Topics: flags, react, reactjs, svg, svg-flags, world
• Language: JavaScript
• Homepage: https://smucode.github.io/react-world-flags/
• Size: 9.53 MB
• Stars: 134
• Watchers: 4
• Forks: 42
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![CircleCI](https://circleci.com/gh/smucode/react-world-flags.svg?style=svg)](https://circleci.com/gh/smucode/react-world-flags)

# react-world-flags

Easy to use SVG flags of the world for react

[Demo](https://smucode.github.io/react-world-flags/)

## Installation

```

npm install react-world-flags

```

## Usage

```javascript

import Flag from 'react-world-flags'

```

Where `code` is the [two letter](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), [three letter](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) or [three digit](https://en.wikipedia.org/wiki/ISO_3166-1_numeric) country code.

You can also pass an optional `fallback` which renders if the given code doesn't correspond to a flag:

```javascript

import Flag from 'react-world-flags'

Unknown }/>

```

All props but `code` and `fallback` are passed through to the rendered `img`

```javascript

// 

```

## Caveat

The bundle contains all flags of the world and is about 1.3 MB gzipped.

SVG's are inlined using [Data_URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).