React icon

icon

/**
 * External dependencies
 */

import React from 'react';

/**
 * Internal dependencies
 */
import './_style.scss';
import Arrow from './svg/Arrow';
import Plus from './svg/Plus';
import X from './svg/X';
import Check from './svg/Check';
import Location from './svg/Location';
import Mail from './svg/Mail';
import Phone from './svg/Phone';
import Pencil from './svg/Pencil';
import Image from './svg/Image';
import Caret from './svg/Caret';
import LocalBusiness from './svg/LocalBusiness';
import OnlineBusiness from './svg/OnlineBusiness';

const Icon = props => {
	const { name } = props;
	let className;

	// Set the class name(s) for our icons.
	className = 'svg-icon icon-' + name;

	if ( name === 'arrow' ) {
		return <span className={ className }><Arrow /></span>;
	}

	if ( name === 'plus' ) {
		return <span className={ className }><Plus /></span>;
	}

	if ( name === 'x' ) {
		return <span className={ className }><X /></span>;
	}

	if ( name === 'check' ) {
		return <span className={ className }><Check /></span>;
	}

	if ( name === 'location' ) {
		return <span className={ className }><Location /></span>;
	}

	if ( name === 'mail' ) {
		return <span className={ className }><Mail /></span>;
	}

	if ( name === 'phone' ) {
		return <span className={ className }><Phone /></span>;
	}

	if ( name === 'pencil' ) {
		return <span className={ className }><Pencil /></span>;
	}

	if ( name === 'image' ) {
		return <span className={ className }><Image /></span>;
	}

	if ( name === 'caret' ) {
		return <span className={ className }><Caret /></span>;
	}

	if ( name === 'local-business' ) {
		return <span className={ className }><LocalBusiness /></span>;
	}

	if ( name === 'online-business' ) {
		return <span className={ className }><OnlineBusiness /></span>;
	}

	if ( name === 'up' ) {
		return <span className={ className }>⬆︎</span>;
	}

	if ( name === 'down' ) {
		return <span className={ className }>⬇︎</span>;
	}

	return null;
};

export default Icon;