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

사용예제
[code]
<!-- 기본 예제 - 단순 확대 -->
<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>
[/code]

아이콘의 종류는 svg-icon.css 파일에 아래와 같은 형식으로 추가하면 됩니다.
[code]
.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");
}
[/code]

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