아이콘 버튼 만들기 ( styled-component )

1. 원하는 이미지를 다운받고, 이미지가 있는 경로에서 불러와서 import

import trash from './icons/trash.png';
import modify from './icons/pencil.png'

2. styled component 로 버튼을 만든다. 기존의 스타일을 없애기 위해 background와 border속성을 none으로 설정

const DeleteBtn = styled.button`
  background: none; 
  border: none;
  cursor: pointer;
`
const ModifyBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
`

3. 만들어 놓은 버튼 안에 img태그를 넣어주고 src에 원하는 이미지를 넣어준다. 크기는 width로 조절

<DeleteBtn onClick={()=> dispatch(deleteTodoThunk(val.id))}>
  <img src={trash} alt='delete' style={{width: '20px'}}/>
</DeleteBtn>
<ModifyBtn>
  <img src={modify} alt='modify' style={{width: '19px'}}/>
</ModifyBtn>

 

+ 체크박스 커스텀

const FinishBtn = styled.input.attrs({ type: "checkbox" })` // 체크박스 타입 Input
  appearance: none; // 기존의 스타일링 없애기
  border: white 1.5px solid;
  border-radius: 50%;
  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%; 
  margin: auto; // 중앙정렬
  width: 23px;
  height: 23px;
  cursor: pointer;
  
  &:checked{ //체크됐을 때
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='purple' 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%;
    border: purple 1.5px solid
  }
`