React Flat Flags

Credit: Flags by msenyil (he gave permission for commercial use in comments)

Installation

yarn add react-flat-flags

npm install react-flat-flags

Usage

import React from 'react';
import {Germany} from 'react-flat-flags';

const App = () => {
  return <Germany />;
};

export default App;

Flags can be sized - based on height (default: 15)

<Germany size={30} />

You can also distort them by only passing width / height values

// Add perserveAspectRatio='none' to allow distortion
<Germany width={21} height={15} preserveAspectRatio="none" />

Also works great with utility classes i.e. frameworks like tailwindcss

<Germany className="h-12 w-auto" />

If you can't use ES6 imports, it's possible to include flag from the compiled folder ./dist.

var Germany = require('react-flat-flags/dist/flags/Germany').default;

var MyComponent = React.createClass({
  render: function() {
    return <Germany />;
  },
});

You can also include the whole flag pack:

import React from 'react';
import * as Flag from 'react-flat-flags';

const App = () => {
  return <Flag.Germany />;
};

export default App;

Readme and build process inspired by react-feather