Icon component using Entypo
This commit is contained in:
Cássio Zen
200
src/components/UI/icon/Icon.js
Normal file
200
src/components/UI/icon/Icon.js
Normal file
@ -0,0 +1,200 @@
|
||||
import React from 'react';
|
||||
import styles from './Icon.css';
|
||||
|
||||
const availableIcons = [
|
||||
'note', 'note-beamed',
|
||||
'music',
|
||||
'search',
|
||||
'flashlight',
|
||||
'mail',
|
||||
'heart', 'heart-empty',
|
||||
'star', 'star-empty',
|
||||
'user', 'users', 'user-add',
|
||||
'video',
|
||||
'picture',
|
||||
'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',
|
||||
'attach',
|
||||
'lock', 'lock-open',
|
||||
'eye',
|
||||
'tag',
|
||||
'bookmark', 'bookmarks',
|
||||
'flag',
|
||||
'thumbs-up', 'thumbs-down',
|
||||
'download', 'upload', 'upload-cloud',
|
||||
'reply', 'reply-all', 'forward', 'quote',
|
||||
'code',
|
||||
'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.`
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function Icon({ style, type }) {
|
||||
return <span className={`${styles.root} ${styles[type]}`} style={style}/>;
|
||||
}
|
||||
|
||||
Icon.propTypes = {
|
||||
type: iconPropType,
|
||||
};
|
||||
Reference in New Issue
Block a user