svg를 아이콘 폰트로 바꾸기

svg를 아이콘 폰트로 바꾸기

 

svg를 html에서 사용하는 방법 네 가지

 

1. html img태그 사용

 

2. css background image

 

3. svg를 복사해서 그대로 쓴다. (하나의 태그처럼 사용)

•   svg를 태그로 사용 시 유용한 점

  예1) aria-label을 지정할 수도 있고

  예2) fill = "currentColor" -> 색상을 원하는대로 컨트롤 가능 (부모 태그의 색상 상속받음)

• svg 태그 사용 시 단점

   리액트를 사용하지 않고 생 html을 작성하는데 svg를 그대로 넣는 것은 적절하지 않다.

   svg이기 때문에 용량은 그대로이지만 코드가 너무 길어진다.

 

4. Icon Font 생성, 적용

svg를 icon font로 바꾸어 사용한다.

https://icomoon.io/app/#/select

 

위 사이트에서 원하는 svg를 찾아 아이콘 폰트로 바꿀 수도 있고,

내가 가지고 있는 svg 파일을 업로드해 아이콘 폰트로 변환하는 것도 가능하다.

아이콘폰트로 다운로드 전 설정하는 예시