SVG Nexus / DEVELOPERS
无需注册登录 | 100% 浏览器本地处理
开发者文档
面向开发者和设计师的矢量与 3D 图标库
把 76,166 个图标的目录、实时 JSON 搜索接口和零依赖组件接入 React、Next.js、Vue 3、Svelte、Tailwind CSS 或 PHP 项目。
1. JSON 搜索与筛选接口 (GET /api/icons)
按关键词、图标库文件夹、分类、风格或许可筛选。返回分页图标,包含安全的内联 SVG、搜索建议和匹配筛选。
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. 矢量文件直链地址
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. 零依赖组件写法
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
实用 SVG 指南与开发教程
SVG 与 PNG 对比:您应该选择哪种格式?
网站图标、品牌标志和界面设计请使用 SVG 格式,因为矢量路径在任何分辨率屏幕上都清晰锐利。需要用于邮件签名或社交平台固定尺寸图片时请选择 PNG。
如何使用 CSS 为 SVG 图标添加动画
为内联 SVG 元素添加 CSS 类名并应用 transform 或 stroke-dasharray 关键帧动画。使用我们的实时编辑器无需 JavaScript 即可生成流畅的 60fps 动画。
如何在 Figma 或浏览器中编辑 SVG 图标
从 SVG Nexus 复制 SVG 代码并直接粘贴到 Figma 或 Illustrator 画布中即可编辑矢量节点;也可直接在浏览器中打开矢量工作室修改图层与颜色。
如何在 React、Next.js 和 Vue 中使用 SVG 图标
在任意图标页面切换到 React TSX 或 Vue 3 标签页即可复制组件代码,支持 currentColor 自动跟随 Tailwind CSS 文字颜色。