跳到内容
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 文字颜色。

输入内容以搜索 76,166 个矢量图标...

方向键移动 | Enter 打开 浏览全部图标

对比

图标来源与许可

许可 商业使用 署名 修改与改色
MIT允许包内附通知允许
ISC允许包内附通知允许
Apache-2.0允许需附通知文件允许
CC BY 4.0允许必须署名允许
CC-BY-SA-4.0允许相同方式共享相同方式共享
Trademark / Brand仅限指代性使用持有者规范受限

图标预览