87ab0bfb62
* initialize figma plugin * Add icons to view * Make the plugin work * Fix search hook * Finialize figma plugin * Finish up icons * remove unused code * Add cover and icon
45 lines
997 B
TypeScript
45 lines
997 B
TypeScript
import { jsx } from '@emotion/core'
|
|
import theme from '../theme'
|
|
import { renderToString } from 'react-dom/server'
|
|
import { FC } from 'react';
|
|
|
|
interface IconButtonProps {
|
|
name: string,
|
|
component: FC,
|
|
}
|
|
|
|
function IconButton({ name, component: IconComponent }: IconButtonProps) {
|
|
const onIconclick = () => {
|
|
const svg = renderToString(<IconComponent/>);
|
|
|
|
parent.postMessage({ pluginMessage: { name, svg }}, '*')
|
|
}
|
|
|
|
return (
|
|
<button
|
|
key={name}
|
|
aria-label={name}
|
|
onClick={onIconclick}
|
|
css={{
|
|
padding: theme.space[2],
|
|
color: '#333',
|
|
background: 'transparent',
|
|
border: 0,
|
|
borderRadius: theme.radii[1],
|
|
appearance: 'none',
|
|
outline: 0,
|
|
'&:hover': {
|
|
background: 'rgba(0, 0, 0, 0.06)',
|
|
},
|
|
'&:focus, &:active': {
|
|
boxShadow: `inset 0 0 0 2px ${theme.colors.blue}`,
|
|
},
|
|
}}
|
|
>
|
|
<IconComponent />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default IconButton
|