after.js

import React from 'react'
import styled, { Box, css, variant } from '@xstyled/styled-components'

const variants = variant({
  variants: {
    gold: css`
      background-color: gold;
      color: white;
      border-color: gold;
    `,
    'outline-gold': css`
      border-color: gold;
      color: gold;
    `,
  },
})

const Icon = styled.box`
  border: 1px solid;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-color: gray100;
  background-color: white;
  cursor: pointer;
  transition: opacity 300ms;
  color: gray700;

  &:hover {
    opacity: 0.6;
  }

  ${variants}

  ${up(
    'md',
    css`
      height: 30;
      width: 30;
    `,
  )}
`

export default function IconButton({ variant, children, ...props }) {
  return (
    <Icon variant={variant} {...props}>
      <Box display="flex" alignItems="center" justifyContent="center">
        {children}
      </Box>
    </Icon>
  )
}

before.js

import React from 'react'
import { styled, Box, th, css, up } from '@smooth-ui/core-sc'

const Icon = styled(Box)`
  border: 1px solid;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-color: ${th('colors.gray100')};
  background-color: ${th('colors.white')};
  cursor: pointer;
  transition: opacity 300ms;
  color: ${th('gray700')};

  &:hover {
    opacity: 0.6;
  }

  ${p =>
    p.variant === 'gold'
      ? css`
          background-color: ${th('colors.gold')};
          color: ${th('colors.white')};
          border-color: ${th('colors.gold')};
        `
      : p.variant === 'outline-gold' &&
        css`
          border-color: ${th('colors.gold')};
          color: ${th('colors.gold')};
        `}

  ${up(
    'md',
    css`
      height: 30px;
      width: 30px;
    `,
  )}
`

export default function IconButton({ variant, children, ...props }) {
  return (
    <Icon variant={variant} {...props}>
      <Box display="flex" alignItems="center" justifyContent="center">
        {children}
      </Box>
    </Icon>
  )
}