Claude Code에 SVGIcons MCP를 추가하고 터미널에서 SVG 아이콘 찾기

Source: Dev.to

소개

올바른 SVG 아이콘을 찾는 일은 개발 중에 끊임없이 발생하는 작은 작업 중 하나입니다.

UI를 만들고 있는데, 깔끔한 검색 아이콘이 필요하고, 그 다음에 설정 아이콘, 혹은 GitHub 로고가 필요할 수 있습니다. 아이콘 사이트를 열어 수동으로 검색하고, 스타일을 비교하고, SVG 마크업을 복사해서 프로젝트에 붙여넣고, 정리한 뒤 다시 반복합니다.

SVGIcons MCP를 사용하면 이 워크플로우를 Claude Code 안으로 직접 가져올 수 있습니다. 터미널을 떠나지 않고도 Claude에게 SVG 아이콘을 검색하고, 결과를 살펴보며, 프론트엔드 프로젝트에 적합한 아이콘을 통합하도록 도와달라고 요청할 수 있습니다.

SVGIcons MCP란?

SVGIcons MCP는 svgicons.com을 위한 Model Context Protocol 서버입니다. AI 코딩 도구가 SVGIcons 카탈로그에 접근할 수 있게 해 주어 다음과 같은 작업을 할 수 있습니다:

• 오픈소스 SVG 아이콘 검색
• 아이콘 메타데이터 확인
• UI 사용 사례에 맞는 아이콘 추천
• SVG 마크업 가져오기
• 웹 앱 및 디자인 시스템에 아이콘을 통합하는 데 도움

실제로 이는 Claude Code가 프로젝트 안에서 작업하면서 아이콘을 찾아줄 수 있다는 의미입니다.

Claude Code와 함께 사용할 이유는?

Claude Code는 파일 편집, 컴포넌트 리팩터링, 코드베이스 전반에 걸친 작업에 이미 유용합니다. SVGIcons MCP를 추가하면 UI 작업에 더욱 유용해집니다. Claude가 다음과 같은 요청을 이해할 수 있기 때문입니다:

Find a clean 24px outline icon for a settings button.