Reicon

项目概述

Reicon 是一个面向设计师与现代前端开发者的开源矢量图标与图形资产库，拥有 1.3k+ Stars。项目提供 3,900+ 像素级手工打磨的矢量 SVG 图标、71,000+ 矢量插画以及 4,900+ 品牌徽标，并提供原生支持 React、Vue、Svelte、React Native、Flutter 以及 Vanilla JS 的跨框架组件包。

核心特性

• 🎨 海量精细矢量资产：涵盖 3,900+ 像素级对齐图标、7.1 万+ 矢量插画与 4,900+ 品牌 Logo，支持 Outline、Filled 与 Duotone 丰富风格。
• ⚡ 零运行时与极致 Tree-Shaking：组件基于纯 SVG 封装，支持 ES Modules 按需加载，未使用的图标代码 100% 摇树优化消除。
• 🌐 全主流框架深度同构：提供 reicon-react、reicon-vue、reicon-svelte、reicon-react-native 等原生组件，开箱即用。
• 🤖 AI Agent 与 MCP 原生赋能：内置专用的 reicon-mcp 协议服务，支持 Cursor、Windsurf、Claude 等 AI 编码工具语义化检索图标与一键生成代码。

快速上手与示例代码

# 安装 React 图标组件包
npm install reicon-react
# 或安装 Vue 图标包
# npm install reicon-vue

import React from 'react';
import { Sparkles, ArrowRight, ShieldCheck } from 'reicon-react';

export function FeatureBadge() {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-card border border-border shadow-xs">
      <Sparkles size={16} className="text-amber-500" />
      <span className="text-xs font-semibold text-foreground">AI 赋能资产</span>
      <ShieldCheck size={16} className="text-emerald-500" />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：需要丰富图标、插画与多框架统一设计资产的中大型 Web 应用、跨端 App 与 SaaS 控制台。
• 与 Lucide / Phosphor 对比：Reicon 除了提供核心 UI 图标外，还内置海量业务插画与品牌 Logo，且支持 AI MCP 智能检索，资产覆盖度更广。