@lightspeed/cirrus-logo

5.0.0-beta.1 • Public • Published

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
  1. Install the component library
yarn add @lightspeed/cirrus-logo
  1. 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>
    );
  }
}
  1. 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.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i @lightspeed/cirrus-logo

      Weekly Downloads

      15

      Version

      5.0.0-beta.1

      License

      MIT

      Unpacked Size

      50.5 kB

      Total Files

      12

      Last publish

      Collaborators

      • kurt.bergeron
      • lightspeedhq
      • ls-guillaume-lambert
      • ls-frederic-bouchard
      • anomen