[연구] svg 색상값을 00으로 시작하는 값으로 보냈을때 인식이 안되는 현상

@function icon($iconName,$color) {
$colors: '%23#{$color}';
$iconList: (
person:"%3Csvg fill='#{$colors}' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M 28.0117 27.3672 C 33.0508 27.3672 37.3867 22.8672 37.3867 17.0078 C 37.3867 11.2187 33.0274 6.9297 28.0117 6.9297 C 22.9961 6.9297 18.6367 11.3125 18.6367 17.0547 C 18.6367 22.8672 22.9961 27.3672 28.0117 27.3672 Z M 13.2930 49.0703 L 42.7305 49.0703 C 46.4101 49.0703 47.7226 48.0156 47.7226 45.9531 C 47.7226 39.9062 40.1523 31.5625 28.0117 31.5625 C 15.8477 31.5625 8.2774 39.9062 8.2774 45.9531 C 8.2774 48.0156 9.5898 49.0703 13.2930 49.0703 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
);
$icon: map-get($iconList, $iconName);
@return url("data:image/svg+xml;utf8,#{$icon}");
}

div {
 background:icon(person,002C5F) no-repeat center center / 24px 24px;
}

icon의 파라미터중 색상값이 00이 아니라면 위 코드는 정상 작동되나, 0으로 시작하게되면 number 타입으로 인식되어 string에 들어가지 않는다.

 

이럴때 가장 간편한 방법은 넘기는 파라미터를 '' 로 감싸서 string 처리를 하는 방법이 있으나
기존에 icon(..) 으로 썼던 애들이 ''가 벗겨진 애들이라 전체코드를 찾아서 ''로 감싸 통일성을 주거나

''로 감싸지 않고도 string 으로 인식해야 한다.

 

인식하기 위한 방법으로는
number 타입일때 앞에 '0'을 넣어주면된다.

@function t($color) {
    $temp: '';
    @if(type-of($color) == 'string') {
        @return quote($color);    
    }
    @if(type-of($color) == 'number') {
        $temp: '0'+#{$color};

        @return '0'+#{$color} 
        // @return str-length($temp);
    }
}

$color의 값이 010303 일 경우 리턴값은 010303 으로 나오고,
000303 일경우 리턴값은 0303으로 나오는데 string으로 인식이되어 str-length로 6개가 아닌 4개일경우 부족한 00을 앞에 붙여준다.