多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

从Figma到Neovim:theSVG 10+插件与扩展生态全景清单

从Figma到Neovim:theSVG 10+插件与扩展生态全景清单 从Figma到NeovimtheSVG 10插件与扩展生态全景清单【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvgtheSVG是一个开源的品牌 SVG 图标库收录7,400 品牌图标涵盖 4,600 品牌 Logo、AWS/Azure/GCP 云架构图标等支持树摇tree-shakeable、完全类型化、免费商用。更关键的是它不只是一堆图标文件而是构建了一个覆盖Figma、VS Code、Neovim、Raycast、Alfred、浏览器、AI 编辑器MCP等场景的完整插件生态。这篇清单文章带你逐一了解 theSVG 生态中的 10 插件与扩展帮你找到最适合自己的那一个。 生态总览一套图标处处可用theSVG 的设计哲学是单一数据源多端分发。所有扩展都基于同一份开放数据静态 JSON 清单 CDN 图标文件无需鉴权即可集成。扩展状态一句话定位Figma 插件已发布设计师在设计稿中直接插入品牌矢量图VS Code 扩展已发布命令面板搜索复制 SVG/JSX/CDN 链接Raycast 扩展已发布macOS/Windows 一键搜索复制MCP Server已发布让 Claude、Cursor 等 AI 助手直接取用图标Agent Skill已发布给 AI Agent 的即插即用技能CLI 工具已发布npx thesvg/cli add github一行命令落盘图标Homebrew已发布Mac 用户brew install thesvgCDNjsDelivr已发布免安装HTML/CSS/Markdown 直接引用Iconify 图标集已发布以thesvg/thesvg-color两套接入 Iconify 生态浏览器扩展BetaChrome/Firefox/Edge 弹窗快速取图Neovim 插件已发布Telescope 选择器插入图标Alfred Workflow已发布macOS 全局快捷搜索JetBrains招募中IntelliJ/WebStorm 等工具窗口欢迎共建各扩展的源码都集中存放在 extensions/ 目录可以逐一对应阅读。 Figma 插件设计师的图标取用器Figma 插件是 theSVG 生态中面向设计师的核心入口搜索 7,400 品牌图标按类别AI、Analytics、Browser、CMS 等过滤一键插入为可编辑矢量节点不是死图变体选择器悬停图标后点击角标可切换 color / mono / light / dark / wordmark最近使用行跨会话保留最近插入的 12 个图标键盘流Enter插入首条结果Cmd/CtrlF聚焦搜索Esc关闭插件从 jsDelivr CDN 拉取图标不依赖 thesvg.org 主站速度稳定。源码与发布说明见 extensions/figma/README.md入口配置在 extensions/figma/manifest.json。 VS Code 扩展命令面板里的图标仓库VS Code 扩展适合写前端和文档的开发者CmdShiftP打开命令面板执行theSVG: Search Icons输入 stripe、lambda 等关键词选择操作支持的输出形式非常实用复制 SVG 源码、复制 JSX 组件、复制 CDN 链接、直接插入光标处且索引首次加载后本地缓存离线也能搜。详细命令表与集合统计见 extensions/vscode/README.md核心实现位于 extensions/vscode/src/。⌨️ Neovim 插件Telescope 里挑图标对于 Neovim 用户thesvg.nvim通过 Telescope 选择器搜索 7,400 图标支持两种插入模式:TheSVGPath— 在光标处插入 CDN URL适合 Markdown 文档:TheSVGInsert— 插入内联 SVG 内容:TheSVG— 按配置决定插入方式要求 Neovim 0.10配置示例lazy.nvim / packer.nvim和快捷键绑定都在 extensions/neovim/README.md 中给出Lua 源码位于 extensions/neovim/lua/。 Raycast 扩展一个按键搞定复制Raycast 扩展主打快。除常规搜索外还有一个 Quick Copy 命令——直接以参数形式输入品牌名秒复制 SVG不打开 UI。复制选项多达 8 种SVG 源码、thesvg.org 直链、jsDelivr CDN 链接、JSX 组件、HTMLimg标签、Data URI、品牌 Hex 色值等覆盖所有使用场景。命令与快捷键明细见 extensions/raycast/README.md。 MCP Server把图标库交给 AI 编辑器这是 theSVG 生态中最具前瞻性的部分。thesvg/mcp-server让 Claude Desktop、Cursor、Claude Code 等 MCP 客户端直接调用图标库无需 API Key。它向 AI 暴露 5 个工具工具作用search_icons按品牌名模糊搜索get_icon获取原始 SVG 元数据list_variants列出某图标的可用变体get_icon_url获取 jsDelivr CDN 链接不下载 SVGlist_categories列出全部类别及数量配置只需几行 JSONnpx -y thesvg/mcp-server无需本地安装。注册表构建时打包进包内搜索和 URL 查询完全离线可用。完整文档见 packages/mcp/README.md。另有Agent Skillnpx skills add glincker/thesvg面向更通用的 AI Agent 场景技能说明见 skills/thesvg/。️ 浏览器扩展与 Alfred Workflow浏览器扩展BetaChrome / Firefox / Edge 弹窗内搜索 7,400 图标复制 SVG、CDN URL 或 Markdown 图片语法。采用 Manifest V3零遥测唯一网络权限指向 jsDelivr CDN。隐私策略见 extensions/browser/PRIVACY.md商店上架说明见 extensions/browser/STORE_LISTING.md。Alfred WorkflowmacOS输入tsvg stripe即可搜索Enter复制 SVG 源码、CmdEnter复制 CDN URL、AltEnter复制 Markdown 语法。清单文件为 extensions/alfred/info.plist搜索逻辑在 extensions/alfred/thesvg_search.py。️ CLI 与 Homebrew终端党的两条路CLIshadcn 风格安装器npx thesvg/cli add github # 把图标 SVG 直接放进项目 npx thesvg/cli search ai # 终端内搜索HomebrewMac 用户brew tap glincker/thesvg brew install thesvgFormula 文件见 extensions/homebrew/Formula/CLI 源码位于 packages/cli/src/。 其他集成方式CDN、Iconify 与框架包CDN 直引https://thesvg.org/icons/{slug}/{variant}.svg固定 URL 规则可直接写进 HTML、CSS、Markdown、Notion、Webflow、Framer无需安装任何东西Iconify 生态thesvgmono与thesvg-color彩色两套图标集可被 Mermaid 架构图、iconify/react等一切 Iconify 消费方使用框架组件包packages/react/、packages/vue/、packages/svelte/ 提供带类型的 React / Vue 3 / Svelte 组件核心数据在 packages/icons/JetBrainsIntelliJ / WebStorm / PyCharm 工具窗口正在招募共建者欢迎提 PR 每个图标最多支持 7 种变体default / mono / light / dark / wordmark 系列所有扩展都遵循同一套 URL 与清单协议这也是生态能低成本扩展到这么多端的原因。✅ 如何选择一张表帮你决定你的场景推荐扩展设计师做品牌视觉稿Figma 插件前端开发写页面VS Code 扩展 或 React/Vue 组件包AI 辅助编程MCP Server写 Markdown / 文档Neovim 插件 或 Alfred Workflow快速全局取图macOSRaycast / Alfred不装任何东西CDN 直引 / IconifytheSVG 的扩展目录结构清晰、文档齐全想深入了解某个插件的实现细节直接打开对应的 extensions/ 子目录即可。无论是从 Figma 画稿出发还是在 Neovim 里敲文档这个开源图标生态都能让你搜索、复制、交付一气呵成。【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表