Add styled icons
parent
004b2002f4
commit
bd5c6c0b23
@ -0,0 +1,50 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const SvgButton = styled.button`
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
/* width: 1.4em; */
|
||||
/* height: 1.4em; */
|
||||
|
||||
svg {
|
||||
outline: none;
|
||||
transition: transform 0.1s linear;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px dashed #17171d;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
`
|
||||
|
||||
const AccessLabel = styled.span`
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
export const IconButton = ({ title, onClick, Icon }) => {
|
||||
return (
|
||||
<SvgButton onClick={onClick} title={title} tabindex="0">
|
||||
{Icon && <Icon aria-hidden="true" focusable="false" />}
|
||||
<AccessLabel>{title}</AccessLabel>
|
||||
</SvgButton>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue