Phosphor Icons MCP 서버

Phosphor Icons에 대한 액세스를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 6가지 다른 굵기와 1,000개 이상의 아이콘을 갖춘 유연한 아이콘 제품군입니다.

중요: 이 서버는 커뮤니티 주도형, AI 지원 MCP 서버이며 공식 저장소가 아니거나 Phosphor Icons 프로젝트와 제휴되어 있지 않습니다. 이 프로젝트는 AI의 도움을 받아 생성되었으며 커뮤니티에 의해 유지 관리됩니다. 원본 Phosphor Icons 프로젝트는 https://github.com/phosphor-icons에서 찾을 수 있습니다.

기능

• 🎨 6가지 아이콘 굵기: thin, light, regular, bold, fill, duotone

• 🌈 색상 사용자 지정: 모든 색상 적용 가능(hex, RGB, 명명된 색상 또는 currentColor)

• 📏 크기 제어: 픽셀 단위로 사용자 지정 크기 지정

• 🔍 아이콘 검색: 이름, 카테고리 또는 태그로 아이콘 찾기

• 📦 일괄 작업: 한 번에 여러 아이콘 가져오기

• 📚 카탈로그 액세스: 메타데이터와 함께 사용 가능한 모든 아이콘 탐색

• 🛠️ 구현 가이드: 프레임워크별 통합 도움말 제공

Related MCP server: Iconify MCP Server

설치

npm install

CLI

이 패키지는 MCP를 호출하지 않고도 SVG/PNG 자산을 내보낼 수 있는 phosphor-icons CLI를 제공합니다.

로컬 개발을 위해서는 먼저 빌드하고 컴파일된 CLI를 실행하세요:

npm run build
node dist/cli.js icon heart --weight bold --color "#ef4444" --size 32 --out heart.svg
node dist/cli.js icon house user gear --format png --size 24 --dir ./icons
node dist/cli.js search arrow --limit 5
node dist/cli.js categories

패키지 설치 후 bin 명령어를 사용하세요:

phosphor-icons icon heart --size 16 --out heart.svg
phosphor-icons icon heart --format png --size 16 --out heart.png
phosphor-icons search arrow --limit 5
phosphor-icons categories

CLI 명령어:

• icon <name...>: 하나 이상의 아이콘을 SVG 또는 PNG로 가져옵니다.

• search <query>: 아이콘 이름과 번들로 제공된 메타데이터를 검색합니다.

• categories: 번들로 제공된 카테고리와 예시를 나열합니다.

• skill path: 번들로 제공된 Codex 스킬 디렉토리 경로를 출력합니다.

icon 명령어 플래그:

• --weight, -w: thin, light, regular, bold, fill 또는 duotone.

• --color, -c: currentColor를 포함한 모든 SVG 색상 값.

• --size, -s: 너비와 높이에 대한 픽셀 크기.

• --format, -f: svg 또는 png.

• --out, -o: 단일 아이콘에 대한 출력 파일.

• --dir, -d: 일괄 내보내기를 위한 출력 디렉토리.

CLI는 먼저 설치된 @phosphor-icons/core 패키지에서 아이콘을 읽습니다. 이를 통해 npm install 이후에도 아이콘 내보내기가 빠르고 결정적이며 오프라인 상태로 유지됩니다. 로컬 자산을 사용할 수 없는 경우 Phosphor Core GitHub 원시 URL로 대체됩니다.

CLI 스모크 테스트

npm install
npm run build
node dist/cli.js icon heart --size 16 --out live-heart.svg
node dist/cli.js icon heart --format png --size 16 --out live-heart.png
node dist/cli.js search arrow --limit 5

예상 결과:

• live-heart.svg는 width="16" height="16"을 포함합니다.

• live-heart.png는 0이 아닌 파일 크기로 생성됩니다.

• 검색 결과는 화살표 관련 아이콘 이름을 반환합니다.

스킬 확장

이 패키지에는 skills/phosphor-icons/SKILL.md에 Codex/Agents 스킬이 포함되어 있습니다. 패키지 설치 후 다음 명령어로 위치를 찾으세요:

phosphor-icons skill path

이 스킬은 에이전트에게 아이콘 검색, 검색, 내보내기 및 프레임워크 구현에 대한 간결한 규칙을 제공합니다. 에이전트 런타임에 스킬을 등록하거나 에이전트 스킬 디렉토리에 스킬을 복사할 때 이 경로를 사용하세요.

Vercel Skills CLI 호환성

이 저장소는 Vercel Labs skills CLI 형식과 호환됩니다: 스킬은 skills/<name>/SKILL.md 아래에 위치하며 파일은 name 및 description YAML 프런트매터로 시작합니다.

이 저장소의 스킬 나열:

npm run skills:list
# or
npx skills add . --list

로컬 체크아웃에서 번들 스킬 설치:

npx skills add . --skill phosphor-icons --agent codex --copy -y

게시 후 GitHub에서 설치:

npx skills add lasaths/phosphor-icons-mcp --skill phosphor-icons --agent codex -y

스킬 경로를 확인하여 npm 패키지 체크아웃에서 설치:

phosphor-icons skill path
npx skills add ./skills/phosphor-icons --agent codex --copy -y

개발

개발 서버 실행:

npm run dev

이 명령은 8081 포트에서 서버를 시작하고 테스트를 위해 Smithery 플레이그라운드를 엽니다.

구성

서버는 선택적 구성 매개변수를 지원합니다:

• defaultWeight: 기본 아이콘 굵기 설정(thin, light, regular, bold, fill, duotone). 기본값: regular

도구

get-icon

Phosphor Icons 라이브러리에서 하나 이상의 SVG 아이콘을 가져옵니다. 단일 아이콘 이름 또는 일괄 검색을 위한 이름 배열을 제공하세요.

매개변수:

• name (문자열, 선택 사항): kebab-case 형식의 단일 아이콘 이름(예: 'arrow-left', 'user'). 단일 아이콘에 사용하세요.

• names (배열, 선택 사항): 일괄 검색을 위한 아이콘 이름 배열. 여러 아이콘에 사용하세요.

• weight (선택 사항): 아이콘 굵기/스타일

• color (선택 사항): 아이콘 색상 - hex(#FF0000), RGB(rgb(255,0,0)), 명명된 색상(red) 또는 'currentColor' 허용

• size (선택 사항): 픽셀 단위의 아이콘 크기(너비와 높이 모두 설정)

• format (선택 사항): 출력 형식(svg 또는 png). 기본값: svg

• saveToFile (선택 사항): PNG 파일을 저장할 경로(단일 아이콘만 해당)

• saveDir (선택 사항): PNG 파일을 저장할 디렉토리(여러 아이콘만 해당)

예시:

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

이름, 카테고리 또는 태그로 아이콘을 검색합니다.

매개변수:

• query (문자열): 검색어

• limit (선택 사항): 반환할 최대 결과 수(기본값: 10)

예시:

search-icons query="arrow" limit=5

list-categories

사용 가능한 모든 아이콘 카테고리 목록을 가져옵니다.

리소스

phosphor://catalog

카테고리, 태그 및 사용 가능한 굵기를 포함한 메타데이터가 포함된 인기 있는 Phosphor Icons의 전체 카탈로그입니다.

phosphor://weights

사용 가능한 6가지 아이콘 굵기/스타일과 최적의 사용 사례에 대한 자세한 정보입니다.

프롬프트

implement-icon

프로젝트에 Phosphor 아이콘을 구현하는 방법에 대한 지침을 얻으세요.

매개변수:

• iconName (문자열): 아이콘 이름

• framework (문자열): 프론트엔드 프레임워크(html, react, vue, svelte, angular)

Smithery에 게시

1. 코드를 GitHub에 푸시합니다.

2. smithery.ai/new를 방문합니다.

3. GitHub 저장소를 연결합니다.

4. 자동 배포를 구성합니다.

아이콘 굵기

• Thin: 섬세하고 최소한의 획 - 큰 크기에 적합

• Light: 미묘하고 세련된 외관 - 현대적인 디자인

• Regular: 균형 잡히고 다재다능함 - 일반적인 용도(기본값)

• Bold: 강하고 임팩트 있음 - 강조 및 작은 크기에 적합

• Fill: 단단하고 채워진 모양 - 강한 강조

• Duotone: 투톤 디자인 - 시각적 흥미

예시

굵게 표시된 빨간색 하트 아이콘 가져오기:

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

사용자 지정 크기의 파란색 별 아이콘 가져오기:

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

내비게이션 아이콘 검색:

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

UI를 위해 여러 개의 색상 아이콘 가져오기:

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

면책 조항

보증 또는 책임 없음

이 소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않는 명시적 또는 묵시적인 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 저자나 저작권 보유자는 소프트웨어 또는 소프트웨어의 사용 또는 기타 거래와 관련하여 발생하는 계약, 불법 행위 또는 기타 행위로 인한 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다.

사용자 책임

• 이 프로젝트는 AI의 도움을 받아 생성된 비공식 커뮤니티 주도 프로젝트입니다.

• 소프트웨어는 어떠한 보증이나 지원 없이 제공됩니다.

• 사용자는 자신의 사용 사례에 대해 소프트웨어를 테스트하고 검증할 책임이 있습니다.

• 유지 관리자는 이 소프트웨어의 사용으로 인해 발생하는 손해, 데이터 손실 또는 문제에 대해 책임을 지지 않습니다.

• 이 프로젝트는 공식 Phosphor Icons 프로젝트의 보증을 받거나 제휴되어 있지 않습니다.

라이선스

이 MCP 서버는 MIT 라이선스를 따릅니다. Phosphor Icons 또한 MIT 라이선스를 따릅니다.

링크

• 🌐 Phosphor Icons 웹사이트

• 💻 원본 Phosphor Icons 저장소 (공식)

• 📦 Phosphor Icons Core

• 📖 Smithery 문서

• 🔧 MCP 프로토콜

크레딧

• 아이콘: Phosphor Icons 제공 - Tobias Fried 제작

• MCP 서버: AI의 도움을 받아 생성된 커뮤니티 주도 프로젝트

• 유지 관리자: 커뮤니티 기여자 (Phosphor Icons와 제휴되지 않음)