APP UI에 SVG 아이콘을 css의 background-image 로 썻는데 꽤 편리하고 괜찮은 것 같아서 남겨둔다.

SVG 코드를 URL-encoder for SVG 페이지의 Insert SVG: 부분에 입력하면 아래 Ready for CSS: 부분에 인코딩되어 출력된다.

SVG 아이콘은 그때그때 검색해서 flaticon 등의 사이트에서 찾아서 사용한다.


SVG 이미지를 css에서 다루면서 가장 유용했던 부분은 체크박스 커스텀이었다.

button이나 textarea, 특히 타입이 여러개로 나뉘는 Input 은 컴포넌트화 해서 사용하는 편인데, 체크박스나 라디오 타입은 커스터마이징 하기 번거로운 편이다.

appearance: none; 을 주고 다 안보이게 한 다음에 새로 만들어야 하는데, 이 때 체크 모양의 SVG 아이콘을 배경이미지로 하여 유용하게 사용했다.

const Checkbox = (props : InputHTMLAttributes<HTMLInputElement>) => {
  return (
    <Styled.Checkbox {...props} />
  )
}

const Styled = {
  Checkbox: styled.input`
    appearance: none;
    border: 1px solid #ddd;
    background-color: #f6f6f6;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;

    &:checked{
      border-color: transparent;
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
      background-size: 100% 100%;
      background-position: 50%;
      background-repeat: no-repeat;
      background-color: #900000;
    }
  `,
}