theSVG
MCP-сервер и скилл для набора из тысяч брендовых SVG-иконок: агент ищет и вставляет иконки без ключа
Низкий риск
Низкий уровень ставим, когда запись в основном дает агенту инструкции и справочные материалы.
Почему такой уровень
- MCP-сервер отдает поиск и содержимое иконок, вставку выполняет агент
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/thesvgОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Выполните в терминале
claude mcp add --transport stdio thesvg -- npx -y @thesvg/mcp-serverИли добавьте в файл .mcp.json, в проекте
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Добавьте в файл ~/.cursor/mcp.json, для всех проектов
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Для одного проекта тот же блок кладут в .cursor/mcp.json.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Выполните в терминале
code --add-mcp '{"name":"thesvg","type":"stdio","command":"npx","args":["-y","@thesvg/mcp-server"]}'Или добавьте в файл .vscode/mcp.json, в проекте
{
"servers": {
"thesvg": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа servers.
Выполните в терминале
codex mcp add thesvg -- npx -y @thesvg/mcp-serverИли добавьте в файл ~/.codex/config.toml, для всех проектов
[mcp_servers.thesvg]
command = "npx"
args = ["-y", "@thesvg/mcp-server"]Если файл уже есть, допишите блок в конец.
Добавьте в файл ~/.gemini/settings.json, для всех проектов
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Добавьте в файл ~/.config/devin/mcp_config.json, для всех проектов
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. В легаси Cascade конфиг MCP лежит в ~/.codeium/windsurf/mcp_config.json.
Бывший Windsurf.
Добавьте в файл cline_mcp_settings.json, для всех проектов
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Файл настроек открывается в Cline: вкладка MCP Servers, кнопка Configure MCP Servers.
Добавьте в файл .roo/mcp.json, в проекте
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Форк Roo Code, папки .roo те же.
Добавьте в файл opencode.json, в проекте
{
"mcp": {
"thesvg": {
"type": "local",
"command": [
"npx",
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcp.
Добавьте в файл ~/.config/zed/settings.json, для всех проектов
{
"context_servers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа context_servers.
Добавьте в файл .codeassistant/mcp.json, в проекте
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": [
"-y",
"@thesvg/mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Подключи MCP-сервер записью с командой npx @thesvg/mcp-server в конфигурации своего MCP-клиента, ключ не нужен. Для проекта библиотека ставится командой npm i thesvg.
Другие способы из описания автора
{
"mcpServers": {
"thesvg": {
"command": "npx",
"args": ["-y", "@thesvg/mcp-server"]
}
}
}Ключ не нужен. Дает агенту поиск и доступ к иконкам.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
theSVG это открытый набор из более чем шести тысяч брендовых SVG-иконок, включая логотипы, AWS, Azure и GCP, с типизацией и tree-shaking. Кроме npm-пакетов для React, Vue, Svelte и React Native проект дает MCP-сервер @thesvg/mcp-server и скилл для агентов. MCP-сервер дает AI-клиентам в Claude Desktop, Cursor и Claude Code прямой доступ к иконкам без ключа: агент ищет нужную иконку и вставляет ее. Есть CLI, расширения для VS Code, Raycast, Figma и других и доступ через CDN.
Для кого. Для фронтенд-разработчиков и дизайнеров, кому нужно, чтобы агент находил и вставлял брендовые SVG-иконки.
Подходит, если
- Нужно, чтобы агент нашел и вставил брендовую или облачную иконку
- Нужны типизированные SVG-иконки с tree-shaking в проект
- Нужен доступ к большому набору иконок через MCP без ключа
Не подходит, если
- Нужны иллюстрации или свои иконки, а не брендовые логотипы
- Нельзя использовать логотипы брендов в вашем контексте по их правилам
Пример запроса к агенту
Найди иконку GitHub и вставь ее в шапку моего сайтаОграничения
Это набор брендовых логотипов и иконок: их использование должно соответствовать правилам брендов. MCP-сервер дает поиск и доступ к иконкам, вставку и верстку выполняет агент. Пакеты рассчитаны на JavaScript и TypeScript.
Как отключить. Уберите запись thesvg из конфигурации MCP-клиента и удалите пакет thesvg из проекта, если он подключался.
MCP
- Транспорт
- stdio
- Авторизация
- не нужна
Проверка безопасности
- MCP-сервер отдает поиск и содержимое иконок, вставку выполняет агент
Коротко о README
README представляет theSVG как открытый набор из тысяч брендовых SVG-иконок, включая логотипы и иконки AWS, Azure и GCP, с типизацией и tree-shaking. Помимо npm-пакета есть отдельные пакеты для React, Vue, Svelte и React Native, CLI, расширения для VS Code, Raycast, Figma, Alfred и Neovim, доступ через CDN и Iconify. Для агентов есть MCP-сервер @thesvg/mcp-server, который дает доступ к иконкам без ключа, и скилл. Лицензия MIT.
Частые вопросы
Нужен ли ключ?
Нет. MCP-сервер @thesvg/mcp-server дает доступ к иконкам без ключа через любой MCP-совместимый клиент.
Это только MCP?
Нет. Есть npm-пакеты для React, Vue, Svelte и React Native, CLI, расширения для редакторов и доступ через CDN, а также скилл для агентов.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой