5.0.0-beta.1 • Published 5 years ago
@lightspeed/cirrus-logo v5.0.0-beta.1
Logo
The logo consists of two elements: the flame and word mark.
Installation
- 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
- Install the component library
yarn add @lightspeed/cirrus-logo
- 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>
);
}
}
- 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.