svg 파일 css 배경으로 사용하는 방법

https://yoksel.github.io/url-encoder/

URL-encoder for SVG

vscode 에서 svg 파일을 열면 

태그로 확인이 가능하다 해당 태그를 복사해서 붙여 넣으면 위 사이트에서 코드를 변환해 준다. 

background-image: url("data:image/svg+xml,%3Csvg id='Icon_menu_white' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect id='icon_menu_boundary' data-name='icon/menu/boundary' width='30' height='30' fill='rgba(255,255,255,0)'/%3E%3Crect id='line' width='24' height='2.3' rx='1.15' transform='translate(3 6.333)' fill='currentColor'/%3E%3Crect id='line-2' data-name='line' width='24' height='2.3' rx='1.15' transform='translate(3 13.933)' fill='currentColor'/%3E%3Crect id='line-3' data-name='line' width='24' height='2.3' rx='1.15' transform='translate(3 21.533)' fill='currentColor'/%3E%3C/svg%3E%0A");

currentColor

변환된 코드에서 currentColor 로 fill 을 수정해 주시면 css 에서 색상코드로 

배경색도 선의 색도 변경 할수 있다. 

 

세상이 참말로 좋아 졌구나 ㅎㅎ