@ai-matrx/相册
翻转任意图标 名称 变成一个成品 一个解析器,四个来源,零 闪光一无:
- 由 ~140 个热Lucide 图标所绘制的静态图 - 击中会同步,不
动态输入延迟。 导出此映射( E)
staticLucideIconMap)和可扩展 (单位:千美元)extendStaticIcons) (中文(简体) ). - 完整的Lucide目录通过验证的动态
import("lucide-react")——解决 一次,在模块一级缓存,并检查导出是否为可转换 之前的组件. - 被禁的品牌图标
react-icons可选依赖性 ——安装人员 默认, 首次使用时懒惰导入react-icons不存在( 安装为--omit=optional,或失败的可选安装) 倒置图标而不是失败 .lucide-react它本身就是一种真正的依赖—— 软件包载有自己的目录;react是唯一的对等点. - 您自己的 SVG 资产通过
svg:编号 - 可注入的登记册地图svg:icons/Home→/icons/Home.svg并制作一个<img>;您注册您的应用程序 启动时的资产路径.
当动态图标加载时,倒置图标(默认) Zap(a) 以下列方式取代:
布局从未跳出,也没有闪出空出.
npm install @ai-matrx/icons lucide-react
# optional, for the curated brand icons (FcGoogle, FaBrave, …):
npm install react-icons
端点 : react >= 18, (中文(简体) ), lucide-react >= 0.400.0,可选择 react-icons >= 5。 。 。 .
使用量
import { IconResolver, DynamicIcon, getIconComponent, renderIcon } from "@ai-matrx/icons";
// The unified component — static, dynamic, custom, and svg: names all work:
<IconResolver iconName="AlarmClock" className="h-4 w-4" />
// Color/size convenience wrapper (Tailwind color names or hex):
<DynamicIcon name="Home" color="blue" size={5} />
<DynamicIcon name="Home" color="#ff6600" size={5} />
// Synchronous lookup (static map + already-cached icons only; always returns a component):
const Icon = getIconComponent("Settings");
// Direct element render:
{renderIcon("Check", { className: "h-4 w-4" })}
存在检查(从未推断存在来自 getIconComponent,它总是返回 a
组件 : isIconRegisteredSync(name) 为同步登记册,
await isRegisteredOrLucideIconName(name) 包括Lucide目录.
用户类型/粘贴输入的规范化名称 : collectLucideIconNameCandidates("alarm-clock")
→ ["alarm-clock", "Alarm-clock", "AlarmClock"],以及 extractLucideJsxIconName("<BugPlay />")
→ "BugPlay" - 对候选人进行验证 isRegisteredOrLucideIconName。 。 。 .
图标拾取器 : getCuratedIconIdsForPicker() 返回有限的、排序的每组
静态的Lucide名称, 装饰品牌代号, 并注册 svg: 编号.
注册您的应用程序的 SVG 资产
包裹船装有 空 svg: 登记 - 登记您的公共资产路径
一旦启动( 任何在图标渲染前运行的模块) :
import { registerSvgIcons } from "@ai-matrx/icons";
registerSvgIcons({
"icons/Home": "/icons/Home.svg",
"icons/brands/microsoft": "/icons/brands/microsoft.svg",
"icons/copy": "/icons/copy.svg",
"icons/hamburger": "/icons/hamburger.svg",
"icons/loading-circle": "/icons/loading-circle.svg",
"icons/logo": "/icons/logo.svg",
"icons/play": "/icons/play.svg",
"icons/share": "/icons/share.svg",
"icons/three-dots": "/icons/three-dots.svg",
"matrx/matrx-icon": "/matrx/matrx-icon.svg",
"matrx/matrx-icon-blue": "/matrx/matrx-icon-blue.svg",
"matrx/matrx-icon-cyan": "/matrx/matrx-icon-cyan.svg",
"matrx/matrx-icon-green": "/matrx/matrx-icon-green.svg",
"matrx/matrx-icon-indigo": "/matrx/matrx-icon-indigo.svg",
"matrx/matrx-icon-orange": "/matrx/matrx-icon-orange.svg",
"matrx/matrx-icon-pink": "/matrx/matrx-icon-pink.svg",
"matrx/matrx-icon-purple": "/matrx/matrx-icon-purple.svg",
"matrx/matrx-icon-slate": "/matrx/matrx-icon-slate.svg",
"matrx/matrx-icon-teal": "/matrx/matrx-icon-teal.svg",
"matrx/matrx-icon-yellow": "/matrx/matrx-icon-yellow.svg",
"matrx/matrx-imagen-logo-text": "/matrx/matrx-imagen-logo-text.svg",
"matrx/safari-pinned-tab": "/matrx/safari-pinned-tab.svg",
"dark-turbulence-noise": "/dark-turbulence-noise.svg",
});
礛 <IconResolver iconName="svg:matrx/matrx-icon" size={24} /> 调制
<img src="/matrx/matrx-icon.svg" …>。调用合并,所以特性可以注册自己的
独立编号。 未登记 svg: id像任何未知的名字一样倒回.
保持自己热的图标同步
import { BrainCircuit } from "lucide-react";
import { extendStaticIcons } from "@ai-matrx/icons";
extendStaticIcons({ BrainCircuit }); // now a zero-latency static hit everywhere
设计
- 静态映射 + 经验证的动态导入 + 模块缓存 + 回放加载 结构 实值 (a) 产品.
react-icons通过构造是可选的:它只能是懒惰地装入的,而且每个 路径在缺失时会降解为后退图标.- 帮助者的类名( N)
getTextColorClass, (中文(简体) ),DynamicIconizing)为尾风形 字符串; 包船没有 CSS . - 无害环境管理+共同JS条件,并附有相应的申报,证明来自包装的柏油球,
"use client"盖在每块地上.
麻省理工学院