Logo Component Example Using BEM and Styled Components

logo.jsx

import React from "react"
import styled from "styled-components"
import { Icon } from "../ui/icon"
import { theme } from "../ui/theme"

const { color } = theme

const Logo = styled(Icon)`
  .logo {
    &__light{
      &--small,
      &--medium,
      &--large {
        fill: ${color.yellow};
      }
    }

    &__heart {
        &--left {
        fill: ${color.primary};
        opacity: 0.95;
      }

      &--right {
        fill: ${color.primary};
        opacity: 0.8;
      }
    }
  }
`

export default ({size, ...props}) => (
  <Logo name="logo" size={size || "7vmax"} {...props}  />
)