209 lines
4.6 KiB
JavaScript
209 lines
4.6 KiB
JavaScript
import React from 'react';
|
|
import styles from './Icon.css';
|
|
|
|
const availableIcons = [
|
|
// Font Awesome Editor Icons
|
|
'bold', 'italic', 'list', 'font', 'text-height', 'text-width', 'align-left', 'align-center', 'align-right',
|
|
'align-justify', 'indent-left', 'indent-right', 'list-bullet', 'list-numbered', 'strike', 'underline', 'table',
|
|
'superscript', 'subscript', 'header', 'h1', 'h2', 'h3', 'paragraph', 'link', 'unlink', 'quote-left', 'quote-right', 'code',
|
|
'picture', 'video',
|
|
// Entypo
|
|
'note', 'note-beamed',
|
|
'music',
|
|
'search',
|
|
'flashlight',
|
|
'mail',
|
|
'heart', 'heart-empty',
|
|
'star', 'star-empty',
|
|
'user', 'users', 'user-add',
|
|
'video-alt',
|
|
'picture-alt',
|
|
'camera',
|
|
'layout',
|
|
'menu',
|
|
'check',
|
|
'cancel', 'cancel-circled', 'cancel-squared',
|
|
'plus', 'plus-circled', 'plus-squared',
|
|
'minus', 'minus-circled', 'minus-squared',
|
|
'help', 'help-circled',
|
|
'info', 'info-circled',
|
|
'back',
|
|
'home',
|
|
'link-alt',
|
|
'attach',
|
|
'lock', 'lock-open',
|
|
'eye',
|
|
'tag',
|
|
'bookmark', 'bookmarks',
|
|
'flag',
|
|
'thumbs-up', 'thumbs-down',
|
|
'download', 'upload', 'upload-cloud',
|
|
'reply', 'reply-all', 'forward', 'quote',
|
|
'code-alt',
|
|
'export',
|
|
'pencil',
|
|
'feather',
|
|
'print',
|
|
'retweet',
|
|
'keyboard',
|
|
'comment',
|
|
'chat',
|
|
'bell',
|
|
'attention',
|
|
'alert',
|
|
'vcard',
|
|
'address',
|
|
'location',
|
|
'map',
|
|
'direction',
|
|
'compass',
|
|
'cup',
|
|
'trash',
|
|
'doc', 'docs', 'doc-landscape', 'doc-text', 'doc-text-inv',
|
|
'newspaper',
|
|
'book', 'book-open',
|
|
'folder',
|
|
'archive',
|
|
'box',
|
|
'rss',
|
|
'phone',
|
|
'cog',
|
|
'tools',
|
|
'share',
|
|
'shareable',
|
|
'basket',
|
|
'bag',
|
|
'calendar',
|
|
'login', 'logout',
|
|
'mic', 'mute', 'sound', 'volume',
|
|
'clock',
|
|
'hourglass',
|
|
'lamp',
|
|
'light-down', 'light-up',
|
|
'adjust',
|
|
'block',
|
|
'resize-full', 'resize-small',
|
|
'popup',
|
|
'publish',
|
|
'window',
|
|
'arrow-combo',
|
|
'down', 'down-circled', 'down-open', 'down-open-mini', 'down-open-big', 'down-dir', 'down-bold', 'down-thin',
|
|
'left', 'left-circled', 'left-open', 'left-open-mini', 'left-open-big', 'left-dir', 'left-bold', 'left-thin',
|
|
'right', 'right-circled', 'right-open', 'right-open-mini', 'right-open-big', 'right-dir', 'right-bold', 'right-thin',
|
|
'up', 'up-circled', 'up-open', 'up-open-mini', 'up-open-big', 'up-dir', 'up-bold', 'up-thin',
|
|
'ccw',
|
|
'cw',
|
|
'arrows-ccw',
|
|
'level-down', 'level-up',
|
|
'shuffle',
|
|
'loop',
|
|
'switch',
|
|
'play', 'stop', 'pause', 'record', 'to-end', 'to-start', 'fast-forward', 'fast-backward',
|
|
'progress-0', 'progress-1', 'progress-2', 'progress-3',
|
|
'target',
|
|
'palette',
|
|
'list', 'list-add',
|
|
'signal',
|
|
'trophy',
|
|
'battery',
|
|
'back-in-time',
|
|
'monitor',
|
|
'mobile',
|
|
'network',
|
|
'cd',
|
|
'inbox',
|
|
'install',
|
|
'globe',
|
|
'cloud', 'cloud-thunder',
|
|
'flash',
|
|
'moon',
|
|
'flight',
|
|
'paper-plane',
|
|
'leaf',
|
|
'lifebuoy',
|
|
'mouse',
|
|
'briefcase',
|
|
'suitcase',
|
|
'dot', 'dot-2', 'dot-3',
|
|
'brush',
|
|
'magnet',
|
|
'infinity',
|
|
'erase',
|
|
'chart-pie', 'chart-line', 'chart-bar', 'chart-area',
|
|
'tape',
|
|
'graduation-cap',
|
|
'language',
|
|
'ticket',
|
|
'water',
|
|
'droplet',
|
|
'air',
|
|
'credit-card',
|
|
'floppy',
|
|
'clipboard',
|
|
'megaphone',
|
|
'database',
|
|
'drive',
|
|
'bucket',
|
|
'thermometer',
|
|
'key',
|
|
'flow-cascade', 'flow-branch', 'flow-tree', 'flow-line', 'flow-parallel',
|
|
'rocket',
|
|
'gauge',
|
|
'traffic-cone',
|
|
'cc', 'cc-by', 'cc-nc', 'cc-nc-eu', 'cc-nc-jp', 'cc-sa', 'cc-nd', 'cc-pd', 'cc-zero', 'cc-share', 'cc-remix',
|
|
'github', 'github-circled',
|
|
'flickr', 'flickr-circled',
|
|
'vimeo', 'vimeo-circled',
|
|
'twitter', 'twitter-circled',
|
|
'facebook', 'facebook-circled', 'facebook-squared',
|
|
'gplus', 'gplus-circled',
|
|
'pinterest', 'pinterest-circled',
|
|
'tumblr', 'tumblr-circled',
|
|
'linkedin', 'linkedin-circled',
|
|
'dribbble', 'dribbble-circled',
|
|
'stumbleupon', 'stumbleupon-circled',
|
|
'lastfm', 'lastfm-circled',
|
|
'rdio', 'rdio-circled',
|
|
'spotify', 'spotify-circled',
|
|
'qq',
|
|
'instagrem',
|
|
'dropbox',
|
|
'evernote',
|
|
'flattr',
|
|
'skype', 'skype-circled',
|
|
'renren',
|
|
'sina-weibo',
|
|
'paypal',
|
|
'picasa',
|
|
'soundcloud',
|
|
'mixi',
|
|
'behance',
|
|
'google-circles',
|
|
'vkontakte',
|
|
'smashing',
|
|
'sweden',
|
|
'db-shape',
|
|
'logo-db'
|
|
];
|
|
|
|
const iconPropType = (props, propName) => {
|
|
if (props[propName]) {
|
|
const value = props[propName];
|
|
if (typeof value !== 'string' || availableIcons.indexOf(value) === -1) {
|
|
return new Error(
|
|
`Invalid type "${value}" supplied to Icon Component.`
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
const noop = function() {};
|
|
|
|
export default function Icon({ style, className = '', type, onClick = noop }) {
|
|
return <span className={`${styles.root} ${styles[type]} ${className}`} style={style} onClick={onClick} />;
|
|
}
|
|
|
|
Icon.propTypes = {
|
|
type: iconPropType,
|
|
};
|