Flag

A set of small and readable flags.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-flag

Or using npm:

npm i -S @lightspeed/cirrus-flag

Contributing

Flags as React components are automatically generated with a build script. To see changes when adding/updating a flag, add your .svg in the svg folder, navigate to this directory in the terminal, and run this command to re-generate the build:

yarn prepublish

This script will generate the React components and the Flag sprite.

Note that this command will be run automatically when in local development and when we publish to npm.

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-flag/Flag.scss';

React Component

Props

Color properties can be any Cirrus color token, ex green-100 or any CSS value.

| Prop | Type | Description | | ----------- | -------- | --------------------------------------------------------------------------------- | | code | string | ISO 3166-2 Country code (case is insensitive) | | name | string | Country / Region / Other name (case is insensitive) | | size | string | Default 16 by 12, can be set to any custom value, the height will scale to be 75% |

Example

import React from 'react';
import Icon from '@lightspeed/cirrus-flag';

const MyComponent = () => (
  <div>
    <Flag code="CA" />
    <Flag name="Canada" />
    <Flag code="CA-QC" />
    <Flag name="Quebec" />
    <Flag code="nl" size="1.75rem" />
  </div>
);

export default MyComponent;