SVG 아이콘을 쉽게 사용하기

SVG 아이콘을 쉽게 사용하기 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

SVG 아이콘을 쉽게 사용하기 정보

SVG 아이콘을 쉽게 사용하기

본문

매번 아이콘 찾으러 다니는 귀차니즘에 이런 저런 고민을 하다보니.
svg-icon.css, svg-icon.js 이렇게 2개의 파일을 만들어서 사용중입니다.

사용예 https://wizcash.kr
svg-icon.css 다운로드 https://wizcash.kr/assets/css/components/svg-icon.css
svg-icon.js 다운로드 https://wizcash.kr/assets/js/svg-icon.js

사용예제


<!-- 기본 예제 - 단순 확대 -->
<span class="svg-icon svg-icon-heart-filled" 
      data-width="24px" 
      data-height="24px"
      data-hover-transform="scale(1.2)"></span>
<!-- 색상 변화 + 회전 -->
<span class="svg-icon svg-icon-heart-filled" 
      data-width="24px" 
      data-height="24px" 
      data-color="#2196F3"
      data-hover-color="#FF4081"
      data-hover-transform="rotate(180deg)"></span>

아이콘의 종류는 svg-icon.css 파일에 아래와 같은 형식으로 추가하면 됩니다.


.svg-icon-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

사용법이 편한지 안편한지는 모르겠지만, 개인적으로는 편하게 사용 중입니다.
혹시나 사용하시면서 아이콘 많이 추가하시면... 공유 좀 해주세요.