https://github.com/ecklf/react-flat-flags
Flat Flags for React
https://github.com/ecklf/react-flat-flags
design flags flat kit react
Last synced: 10 months ago
JSON representation
Flat Flags for React
- Host: GitHub
- URL: https://github.com/ecklf/react-flat-flags
- Owner: ecklf
- License: mit
- Created: 2019-08-30T07:39:11.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-30T09:40:55.000Z (about 6 years ago)
- Last Synced: 2025-08-10T21:59:04.822Z (10 months ago)
- Topics: design, flags, flat, kit, react
- Language: JavaScript
- Homepage:
- Size: 1.49 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Flat Flags
[](https://www.npmjs.com/package/react-flat-flags)
[](https://www.npmjs.com/package/react-flat-flags)
Credit: Flags by [msenyil](https://dribbble.com/shots/1211759-Free-195-Flat-Flags) (he gave permission for commercial use in comments)
### Installation
```sh
yarn add react-flat-flags
```
```sh
npm install react-flat-flags
```
### Usage
```javascript
import React from 'react';
import {Germany} from 'react-flat-flags';
const App = () => {
return ;
};
export default App;
```
Flags can be sized - based on height (default: 15)
```javascript
```
You can also distort them by only passing width / height values
```javascript
// Add perserveAspectRatio='none' to allow distortion
```
Also works great with utility classes i.e. frameworks like tailwindcss
```javascript
```
If you can't use ES6 imports, it's possible to include flag from the compiled folder ./dist.
```javascript
var Germany = require('react-flat-flags/dist/flags/Germany').default;
var MyComponent = React.createClass({
render: function() {
return ;
},
});
```
You can also include the whole flag pack:
```javascript
import React from 'react';
import * as Flag from 'react-flat-flags';
const App = () => {
return ;
};
export default App;
```
Readme and build process inspired by [react-feather](https://github.com/feathericons/react-feather)