// External dependencies
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import assign from 'lodash/assign';
// Internal dependencies
import './icon.scss';
class ETBuilderIcon extends PureComponent {
static defaultProps = {
color: '#4c5866',
size: 14,
viewBox: '0 0 28 28',
};
static propTypes = {
className: PropTypes.string,
color: PropTypes.string,
block: PropTypes.bool,
icon: PropTypes.string,
iconSvg: PropTypes.string,
size: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
style: PropTypes.object,
viewBox: PropTypes.string,
};
_renderGraphics() {
switch (this.props.icon) {
case 'add':
return (
);
case 'back':
return (
);
case 'check':
return (
);
case 'close':
case 'close-small':
case 'multiply-by':
return (
);
case 'column':
return (
);
case 'contract':
return (
);
case 'copy':
return (
);
case 'delete':
return (
);
case 'desktop':
return (
);
case 'grid':
return (
);
case 'wireframe':
return (
);
case 'exit':
return (
);
case 'expand':
return (
);
case 'heading-four':
return (
);
case 'heading-one':
return (
);
case 'heading-three':
return (
);
case 'heading-two':
return (
);
case 'help':
return (
);
case 'help-circle':
return (
);
case 'history':
return (
);
case 'indent':
return (
);
case 'letter-spacing-small':
return (
);
case 'letter-spacing':
return (
);
case 'line-height-small':
return (
);
case 'line-height':
return (
);
case 'list':
return (
);
case 'loading':
return (
);
case 'move':
return (
);
case 'position-move':
return (
);
case 'position-horizontal':
return (
);
case 'position-vertical':
return (
);
case 'numbered-list':
return (
);
case 'paint':
return (
);
case 'phone':
return (
);
case 'preview-link':
return (
);
case 'redo':
return (
);
case 'reset':
return (
);
case 'resize':
return (
);
case 'save':
return (
);
case 'setting':
return (
);
case 'sidebar':
return (
);
case 'tablet':
return (
);
case 'text-bold':
return (
);
case 'text-center':
return (
);
case 'text-italic':
return (
);
case 'text-justify':
return (
);
case 'text-large':
return (
);
case 'text-left':
return (
);
case 'text-link':
return (
);
case 'text-quote':
return (
);
case 'text-right':
return (
);
case 'text-small':
return (
);
case 'text-underline':
return (
);
case 'text-underline-double':
return (
);
case 'text-strikethrough':
return (
);
case 'text-smallcaps':
return (
);
case 'text-uppercase':
return (
);
case 'text-h1':
return (
);
case 'text-h2':
return (
);
case 'text-h3':
return (
);
case 'text-h4':
return (
);
case 'text-h5':
return (
);
case 'text-h6':
return (
);
case 'text':
return (
);
case 'undent':
return (
);
case 'undo':
return (
);
case 'zoom-in':
return (
);
case 'zoom-out':
return (
);
case 'lock':
return (
);
case 'previous':
return (
);
case 'next':
return (
);
case 'sync':
return (
);
case 'portability':
return (
);
case 'background-color':
return (
);
case 'background-image':
return (
);
case 'background-video':
return (
);
case 'background-gradient':
return (
);
case 'swap':
return (
);
case 'none':
return (
)
case 'animation-bounce':
return (
);
case 'animation-fade':
return (
);
case 'animation-flip':
return (
);
case 'animation-fold':
return (
);
case 'animation-none':
return (
);
case 'animation-roll':
return (
);
case 'animation-zoom':
return (
);
case 'animation-slide':
return (
);
case 'align-left':
return (
);
case 'align-center':
return (
);
case 'align-right':
return (
);
case 'click':
return (
);
case 'hover':
return (
);
case 'menu-expand':
return (
);
case 'border-all':
return (
);
case 'border-top':
return (
);
case 'border-right':
return (
);
case 'border-bottom':
return (
);
case 'border-left':
return (
);
case 'border-link':
return (
);
case 'window-undock':
return (
);
case 'chevron-right':
return (
);
case 'chevron-left':
return (
);
case 'chevron-up':
return (
);
case 'chevron-down':
return (
);
case 'flip-horizontally':
return (
);
case 'flip-vertically':
return (
);
case 'eye':
return (
);
case 'closed-eye':
return (
);
case 'linked':
return (
);
case 'unlinked':
return (
);
case 'app-setting':
return (
);
case 'expand-palette':
return (
);
case 'paint-brush':
return (
);
case 'dynamic':
return (
);
case 'search':
return (
);
case 'skew':
return (
);
case 'rotate':
return (
);
case 'transform-origin':
return (
);
case 'divi-logo':
return (
);
case 'global-presets-open':
return (
);
case 'global-presets-return':
return (
);
case 'responsive-orientation-portrait':
return (
);
case 'responsive-orientation-landscape':
return (
);
case 'pencil':
return (
);
case 'blur':
return (
);
case 'horizontal-motion':
return (
);
case 'vertical-motion':
return (
);
case 'cursor':
return (
);
case 'pin':
return (
);
case 'caret-down':
case 'caret-left':
case 'caret-right':
case 'caret-up':
return (
);
case 'overflow':
return (
);
case 'layers-view':
return (
);
case 'update-with-current-styles':
return (
);
case 'star':
return (
);
default :
return false;
}
}
render() {
const {
block,
children,
className,
color,
icon,
iconSvg,
size,
viewBox,
} = this.props;
// bail is no icon is defined.
if (! icon && ! iconSvg) {
return false;
}
let styles = {
fill: color,
width: size * 2,
minWidth: size * 2,
height: size * 2,
margin: - (size - 8),
};
switch (icon) {
case 'caret-left':
styles = assign(styles, { transform: 'rotate(90deg)' });
break;
case 'caret-right':
styles = assign(styles, { transform: 'rotate(-90deg)' });
break;
case 'caret-up':
styles = assign(styles, { transform: 'rotate(180deg)' });
break;
default:
}
const iconName = icon ? `et-fb-icon--${icon}` : 'et-fb-icon--svg';
let classes = classNames({
'et-fb-icon': true,
'et-fb-icon--block': block,
}, iconName, className);
// Return early for displaying svg from defined path
if (iconSvg) {
return (
);
}
const iconCode = this._renderGraphics();
if (! iconCode) {
styles = {};
}
// Display pre-defined svg icon
return (
{iconCode
?
: children}
);
}
}
export default ETBuilderIcon;