[Sass] .scss로 svg 아이콘 색상 변경

svg 파일은 백터 형태로서 픽셀단위가 아니여서 깨지는 현상이 없는 파일이다. 

따라서 작은 사이즈의 파일 형태라도 원하는 사이즈로 자유롭게 이용이 가능하며, 이를 데이터 형식으로 변환하여 사용할 경우 그리는 형식이라 사이즈 및 색상을 자유자제로 변경이 가능하다.

또한 svg 파일을 코드에 사용할 경우 ie에서 호환이 되지 않지만, Sass와 svg data 형태를 사용하게 되면 ie10 이상부터 호환이 가능하다. (ie10~)

 

그러기 위해선 Sass를 사용하는 방법을 소개하고자 한다. 

 

기존에 svg를 data 형식으로 바꾸는 방법에 대해서 포스팅을 했었다.

https://jintrue.tistory.com/entry/SVG-data-%ED%98%95%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0

[SVG] data 형식으로 변환하기

data 형식으로 변환하는 방법의 글을 먼저 읽고 오길 추천한다. 

만약에 아래의 모양의 svg아이콘을 사용하고자 한다.

call.svg

해당 아이콘을 data 형식으로 변환 할 경우 소스는 아래와 같다.

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EVSQUARE/4) Icons/call/call%3C/title%3E%3Cg id='VSQUARE_Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='VSQUARE/4)-Icons/call/call'%3E%3Crect id='Rectangle' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M18.0256777,22 C17.154071,22 15.9297136,21.6846448 14.0963031,20.6605253 C11.8668294,19.4105102 10.1423698,18.2564784 7.92495222,16.045291 C5.78701518,13.9091045 4.74662393,12.5260521 3.2905227,9.876913 C1.64554358,6.88580547 1.92595804,5.31792941 2.23941498,4.64783204 C2.61270557,3.84692952 3.16371107,3.36790588 3.87591023,2.89245371 C4.28043494,2.62746637 4.70852249,2.40031277 5.15474307,2.21387409 C5.19939506,2.19467743 5.2409214,2.17637364 5.27798255,2.15985559 C5.49900988,2.06030081 5.83389976,1.90985257 6.25809362,2.07056879 C6.5411872,2.17682008 6.79391744,2.39423341 7.18953403,2.78486313 C8.00086059,3.58487278 9.10956938,5.36659071 9.51858156,6.24160127 C9.79319127,6.83134053 9.97492484,7.22063094 9.97537136,7.65724336 C9.97537136,8.16841024 9.71817593,8.56261142 9.40605856,8.98806299 C9.34756446,9.06797467 9.28951688,9.14431487 9.23325538,9.21842291 C8.89345377,9.66485687 8.81888496,9.79387628 8.86800214,10.0242362 C8.96757606,10.4871882 9.71013857,11.8653299 10.9304773,13.0827553 C12.1508161,14.3001807 13.4894826,14.9957248 13.9543097,15.0948331 C14.1945374,15.146173 14.3262608,15.0684935 14.7870693,14.7167035 C14.8531542,14.6662565 14.9210252,14.6140237 14.9920219,14.561791 C15.468012,14.2077688 15.8439817,13.9573194 16.3431909,13.9573194 L16.3458701,13.9573194 C16.7803339,13.9573194 17.1522849,14.1457145 17.7684823,14.4564325 C18.572218,14.8617946 20.4078611,15.9560042 21.2129364,16.7680676 C21.6045343,17.1627152 21.8228825,17.414504 21.9296008,17.6970967 C22.0903479,18.1225482 21.9389777,18.4560344 21.8402968,18.6792514 C21.8237756,18.7163054 21.8054682,18.7569309 21.7862679,18.8020207 C21.5983177,19.2473609 21.3697779,19.6744643 21.103539,20.077929 C20.6288884,20.787759 20.1479866,21.3373192 19.3451439,21.7109844 C18.9328822,21.9059466 18.4817048,22.0047133 18.0256777,22 L18.0256777,22 Z' id='Path' fill='%23000000' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

여기서 두개 이상의 아이콘을 저장할 경우 아래와 같이 sass 문법을 활용하여 공통적인 url 부분 주소를 묶어 함수를 호출할 수 있다.

$size--24: 24px;
$grey--900: '000';
@mixin background-contain {
	background: no-repeat center / contain;
}
/* ########## Icons Setting */
@function iconImg($imgName, $color) {
    $iconProp: (
    	call: "4) Icons/call/call%3C/title%3E%3Cg id='VSQUARE_Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='VSQUARE/4)-Icons/call/call'%3E%3Crect id='Rectangle' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M18.0256777,22 C17.154071,22 15.9297136,21.6846448 14.0963031,20.6605253 C11.8668294,19.4105102 10.1423698,18.2564784 7.92495222,16.045291 C5.78701518,13.9091045 4.74662393,12.5260521 3.2905227,9.876913 C1.64554358,6.88580547 1.92595804,5.31792941 2.23941498,4.64783204 C2.61270557,3.84692952 3.16371107,3.36790588 3.87591023,2.89245371 C4.28043494,2.62746637 4.70852249,2.40031277 5.15474307,2.21387409 C5.19939506,2.19467743 5.2409214,2.17637364 5.27798255,2.15985559 C5.49900988,2.06030081 5.83389976,1.90985257 6.25809362,2.07056879 C6.5411872,2.17682008 6.79391744,2.39423341 7.18953403,2.78486313 C8.00086059,3.58487278 9.10956938,5.36659071 9.51858156,6.24160127 C9.79319127,6.83134053 9.97492484,7.22063094 9.97537136,7.65724336 C9.97537136,8.16841024 9.71817593,8.56261142 9.40605856,8.98806299 C9.34756446,9.06797467 9.28951688,9.14431487 9.23325538,9.21842291 C8.89345377,9.66485687 8.81888496,9.79387628 8.86800214,10.0242362 C8.96757606,10.4871882 9.71013857,11.8653299 10.9304773,13.0827553 C12.1508161,14.3001807 13.4894826,14.9957248 13.9543097,15.0948331 C14.1945374,15.146173 14.3262608,15.0684935 14.7870693,14.7167035 C14.8531542,14.6662565 14.9210252,14.6140237 14.9920219,14.561791 C15.468012,14.2077688 15.8439817,13.9573194 16.3431909,13.9573194 L16.3458701,13.9573194 C16.7803339,13.9573194 17.1522849,14.1457145 17.7684823,14.4564325 C18.572218,14.8617946 20.4078611,15.9560042 21.2129364,16.7680676 C21.6045343,17.1627152 21.8228825,17.414504 21.9296008,17.6970967 C22.0903479,18.1225482 21.9389777,18.4560344 21.8402968,18.6792514 C21.8237756,18.7163054 21.8054682,18.7569309 21.7862679,18.8020207 C21.5983177,19.2473609 21.3697779,19.6744643 21.103539,20.077929 C20.6288884,20.787759 20.1479866,21.3373192 19.3451439,21.7109844 C18.9328822,21.9059466 18.4817048,22.0047133 18.0256777,22 L18.0256777,22 Z' id='Path' fill='%23#{$color}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
    );
    $icon: map-get($iconProp, $imgName);
	@return url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EVSQUARE/#{$icon}");
}
.icon {
	display: inline-block;
	vertical-align: middle;
	width: $size--24;
	height: $size--24;
	box-sizing: border-box;
	cursor: pointer;
    @include background-contain;
    &-call {
    	@extend .icon;
        background-image: iconImg(call, $grey--900);
    }
}
/* // Icons Setting ########## */

 

CSS로 컴파일 하여 사용하면된다.

현재, 예를 든 스타일 정의는 class="icon-call"로 호출하여 사용할 수 있다.