SW 일반
svg를 아이콘 폰트로 바꾸기
helloworld:
2022. 2. 8. 22:32
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 파일을 업로드해 아이콘 폰트로 변환하는 것도 가능하다.
