styled-component-with-svg-loader

styled-component-with-svg.tsx

import Logo from './logo.svg'

type StyledLogoProps = {
  active: boolean
}

// styled-componentsでスタイル定義を直接書いて大きさを指定したり動的にpropsで状態を変化させたりできる。便利。
const StyledLogo = styled(Logo)<StyledLogoProps>`
  color: ${p => p.active ? 'red' : 'blue'};
  width: 20px;
  height: 20px;
`

// <StyledLogo active={active} />