86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import React from "react"
|
|
import styled from "@emotion/styled"
|
|
import {
|
|
ArrowRightCircle,
|
|
ArrowRight,
|
|
Book,
|
|
Calendar,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Circle,
|
|
Clock,
|
|
CloudOff,
|
|
Download,
|
|
Edit2,
|
|
LogIn,
|
|
Monitor,
|
|
Moon,
|
|
Package,
|
|
Search,
|
|
Smartphone,
|
|
Sun,
|
|
User,
|
|
} from "react-feather"
|
|
import { withTheme } from "emotion-theming"
|
|
|
|
const IconBase = styled.div`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
border-radius: 12px;
|
|
padding: 5px;
|
|
transition: 0.1s all ease-in-out;
|
|
color: ${props => props.theme.colors.secondary};
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px ${props => props.theme.colors.bodyBackground},
|
|
0 0 0 5px ${props => props.theme.colors.hover};
|
|
}
|
|
&:hover {
|
|
background-color: ${props => !props.disabled && props.theme.colors.hover};
|
|
cursor: ${props => !props.disabled && "pointer"};
|
|
}
|
|
`
|
|
|
|
const Icon = ({ name, tabindex, label, labelRight, size, ...rest }) => (
|
|
<IconBase tabIndex={tabindex} {...rest}>
|
|
{label && !labelRight && (
|
|
<span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
|
|
{label}
|
|
</span>
|
|
)}
|
|
{name === "ArrowRightCircle" && <ArrowRightCircle size={size} />}
|
|
{name === "ArrowRight" && <ArrowRight size={size} />}
|
|
{name === "Book" && <Book size={size} />}
|
|
{name === "Calendar" && <Calendar size={size} />}
|
|
{name === "ChevronLeft" && <ChevronLeft size={size} />}
|
|
{name === "ChevronRight" && <ChevronRight size={size} />}
|
|
{name === "Circle" && <Circle size={size} />}
|
|
{name === "Clock" && <Clock size={size} />}
|
|
{name === "CloudOff" && <CloudOff size={size} />}
|
|
{name === "Download" && <Download size={size} />}
|
|
{name === "Edit2" && <Edit2 size={size} />}
|
|
{name === "LogIn" && <LogIn size={size} />}
|
|
{name === "Monitor" && <Monitor size={size} />}
|
|
{name === "Moon" && <Moon size={size} />}
|
|
{name === "Package" && <Package size={size} />}
|
|
{name === "Search" && <Search size={size} />}
|
|
{name === "Smartphone" && <Smartphone size={size} />}
|
|
{name === "Sun" && <Sun size={size} />}
|
|
{name === "User" && <User size={size} />}
|
|
{label && labelRight && (
|
|
<span
|
|
style={{
|
|
margin: "3px -3px 3px 3px",
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</IconBase>
|
|
)
|
|
|
|
export default withTheme(Icon)
|