Cacher is the code snippet organizer for pro developers

import React from 'react';
import cx from 'classnames';
import '../../../styles/menu-toggle.less';

export const Collapsed = () => {
    return (
        <svg viewBox="0 0 20 20" className={styles.default}>
            <path className={styles.collapsed.path} d="M9,6h2v8H9V6z"/>
            <path className={styles.collapsed.path} d="M6,11V9h8v2H6z"/>
        </svg>
    );
};

export const Expanded = ({primary, expanded}) => {
    const pathStyle = cx(
        {
            [styles.collapsed.primary]: primary,
            [styles.collapsed.path]: !primary
        },
        {
            [styles.expanded.primary]: expanded,
            [styles.expanded.path]: !expanded
        });

    return (
        <svg viewBox="0 0 20 20" className={styles.default}>
            <path className={pathStyle} d="M6,11V9h8v2H6z"/>
        </svg>
    );
};

const styles = {
    default: 'ln-menu-toggle',
    collapsed: {
        path: 'ln-menu-toggle--collapsed__path',
        primary: 'ln-menu-toggle--collapsed--primary'
    },
    expanded: {
        path: 'ln-menu-toggle--expanded__path',
        primary: 'ln-menu-toggle--expanded--primary'
    }
};