[CSS] Svg 파일을 아이콘 폰트로 만들기

SVG 파일을 사용하는 대표적인 방식이 두 가지가 있다

 

1. 이미지 태그 'src' 속성에 넣어서 사용하기 

2. css의 background-image에 넣어서 사용하는 방법

 

이 두 가지는 일반적으로 사용하는 방식이다.

그러나 이 두 가지 방법보다 더 유용하고 활용성이 좋은 방식이 있다.

 

svg파일이 위대한 이유

=> svg 코드를 그대로 복붙해서 태그처럼 사용할 수가 있다!

 

**좋은점? 

svg 태그에 그대로 'attribute'값을 적용할 수 있다

ex) fill 속성을 이용해서 currentColor값을 적용해서 부모의 Color를 상속시키거나, aria-label을 그대로 부여할 수 있음 

 

But, 항상 좋은 점만 있는 것이 아니다. 

코드가 매우 길다는 것이다. 이 문제는 리액트에서는 1줄의 코드로 상쇄가능하나, 쌩 HTML을 쓰는 이상, 

svg 태그가 매우 길어진다는 문제에 직면하지 않을 수 없다.

 

그래서 SVG 파일을 Icon Font로 바꿔주는 과정을 거치면 아주 간편하게 svg 아이콘을 사용할 수 있게 된다.

 

그 과정은 icomoon이라는 아주 아름다운 사이트에서 클릭 몇 번으로 처리할 수 있다.

 

웹폰트로 변화해주는 사이트 

 

 https://icomoon.io/

Icon Font & SVG Icon Sets ❍ IcoMoon

 

* icomoon에서 웹 폰트로 변환시키는 과정 

 

1. Import Icons 버튼을 누르면 로컬에 있는 svg 파일을 업로드 가능

 

2. 사이트에 업로드된 Svg 파일들을 선택하고

3. 하단에 있는 Generate Font를 클릭

 

4. 웹 폰트로 변환된 것을 볼 수 있음

 

 

5. 이 페이지 하단에 Font Download 버튼을 누름

 

7. 압축 파일을 해제하면 변환된 파일들이 담긴 fonts 폴더와 css 파일을 볼 수 있음

8. style.css 파일을 열어보자! 이 코드를 그대로 복사해서 _font.css같은 파일을 만들고 붙여넣기 한다.

9. url을 올바르게 설정하는 것을 잊지 말자

 

10. 이제 필요한 곳에서 Import해서 사용하면 사용준비는 끝이다

 

 

 

 

11. i태그 클래스에 사용할 아이콘의 클래스 네임을 지정해주면 사용할 수 있다.

 

잘 렌더링 된 것을 확인할 수 있다.

 

이제 font 속성을 가졌기 때문에 크기 조절도 font-size를 사용하면 된다.