@lightspeed/cirrus-flag

    4.0.0 • Public • Published

    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;

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-flag

    DownloadsWeekly Downloads

    18

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    2.2 MB

    Total Files

    1062

    Last publish

    Collaborators

    • kurt.bergeron
    • tombertrand
    • lightspeedhq
    • ls-guillaume-lambert
    • inooid
    • ls-frederic-bouchard
    • x.drdak
    • anomen
    • xena