외부에서 svg를 가져다 쓸 때 %23 의미

Front-end/HTML CSS

외부에서 svg를 가져다 쓸 때 %23 의미

조커린 2020. 1. 21. 15:55

react checkbox 사용시 사이트에 맞게 내부 css 를 변경해야 할 때가 있다. 

기본 제공 style을 공식 사이트에서 가져왔더니 내부 아이콘 이미지가 svg였다.

컬러를 변경하려고 보니 컬러 코드가 신기하게 되어 있어서 찾기 어려웠는데

fill= %23ffffff 이런 식으로 코드가 작성되어 있으니 뒤에 부분만 바꾸면 된다

%23은 크롬에서 #과 같다.

           '&:before': {
                display: 'block',
                width: 11,
                height: 11,
                backgroundImage:
                    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
                    " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
                    "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23ffffff'/%3E%3C/svg%3E\")",
                content: '""',
            },