SVG Icon을 사용한다고 하였을 때, <svg> 태그안에 그대로 붙여 inline방식으로 사용하는 것이 나을까? 혹은 css의 background로 external 방식을 사용하는게 나을까?

한 글에서 다음과 같은 정리를 보았다.

Inline의 장점

1. Http Request가 줄어든다.
2. fill 혹은 color를 사용해 아이콘을 변경할 수 있다.
3. SVG자체가 컨텐츠의 일부가 되기 때문에 여러 이벤트를 적용할 수 있다.

extenal의 장점

1. 캐싱이 된다.
2. 코드가 복잡해지지 않는다. (이건 이제 맞지 않는 말인거 같다. Inline 방식을 활용해도 파일을 import 해서 넣으면 되기 때문에 충분히 깔끔하게 코드를 관리할 수 있다.)
3. 변경할 일이 있다면 파일만 변경하면 된다.(뭐 이것도 더이상 이것만의 장점은 아닌거 같다)

그래서 결국 어떤 방식을 사용해야 하는가?

내가 읽은 한 포스트에서는 SVG를 그대로 사용하는 방식을 추천한다. 아무래도 스타일등을 마음대로 수정할 수 있다는 것이 가장 큰 이유인 듯 하다. 또한 React에서 사용할 경우 SVG를 활용해 Component로 만들어 사용하는 것을 추천한다.