React Flagkit SVG

Why yet another package?

• Supports tree shaking
• Uses svg instead of img tags
• Adds typings

Installation

yarn add react-flagkit-svg

npm install react-flagkit-svg

Usage

import React from "react";
import { DE } from "react-flagkit-svg";

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

export default App;

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

<DE size={30} />

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

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

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

<DE className="h-12 w-auto rounded-sm" />

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

var DE = require("react-flagkit-svg/dist/flags/DE").default;

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

You can also include the whole flag pack:

import React from "react";
import * as Flag from "react-flagkit-svg";

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

export default App;

Readme and build process inspired by react-feather