Logo

The logo consists of two elements: the flame and word mark.

Installation

1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2

2. Install the component library

yarn add @lightspeed/cirrus-logo

3. Hook the <ThemeProvider> and the theme in your app.

// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}

4. Import Logo and use right away!

Usage

Refer to the Lightspeed Style Guide "How to use our logos" guide when implementing the component in your application.

React Component

Props

| Prop | Type | Description | | ------- | ------------------------------------------------------ | ------------------------------------------------- | | width | string | Logo width, height will be proportional on type | | type | oneOf([horizontal, flame, vertical]) | Logo type, default is horizontal | | color | oneOf([red-white, maple, dive, night, snow]) | Optional color variants |

Example

import React from 'react';
import Logo from '@lightspeed/cirrus-logo';

const MyComponent = () => (
  <div>
    <Logo />
  </div>
);

export default MyComponent;

CSS Component

There is no CSS Component for logos. However, you can download the .svg files from the Lightspeed Style Guide.