@ 设计工具/ 套件

CSS 29 个属性及其值的手工图标. 用来设计说出代码的工具.

反应组件和生SVG. 每个图标都符合一个15x15像素网格,并有1x分辨率的脆边.

带给你的 flett.cc (英语)

安装

npm install @designtools/cascade

使用量

import { DisplayFlex, PaddingTop, FlexDirectionRow } from "@designtools/cascade";

function App() {
  return (
    <div>
      <DisplayFlex />
      <PaddingTop />
      <FlexDirectionRow />
    </div>
  );
}

道具

每个图标组件接受以下道具以及所有标准SVG属性(SVGAttributes<SVGSVGElement>:

<DisplayFlex color="#6366f1" />
<DisplayFlex solid />
<DisplayFlex width={30} height={30} />

任何标准的SVG属性(例如. className, (中文(简体) ), style, (中文(简体) ), aria-hidden)也可以直接通过.

无障碍

没有图标的船 aria-hidden 因此消费者可以决定每个使用案例.

装饰性 (最常见的)——添加 aria-hidden="true"数字 :

<label>
  <DisplayFlex aria-hidden="true" />
  Flex
</label>

独立/意义 ——使用 aria-label数字 :

<button aria-label="Set display to flex">
  <DisplayFlex aria-hidden="true" />
</button>

原始 SVGs 软件

静态 .svg 文件包含在 svg/ 用于外部 React 的目录.

元数据

包输出 a metadata 将 CSS 属性/ 值映射到图标名称 :

import { metadata } from "@designtools/cascade";

// Each entry: { property: string, value: string | null, icon: string }
metadata.forEach((entry) => {
  console.log(`${entry.property}: ${entry.value} → ${entry.icon}`);
});

用于构建图标拾取器,文档,或编辑器在程序上集成.

类别

兼容性

包裹两只 无害环境管理 (单位:千美元).mjs和 司法理事会 (单位:千美元).cjs)捆绑了完整的TypeScript声明. 它与任何现代的捆绑或运行时间一起在盒子外工作:

这个 exports 地图在 package.json 确保正确格式自动解决。 软件包是标记的 sideEffects: false,因此导入一个图标不会捆绑其余部分.

要求数 反应 18+ 作为同伴的依赖.

许可证

麻省理工学院. 生成自 间 (单位:千美元).