@flipdish/ui-icons
一个用于Flipdish设计系统的图标的单一源不可知导入面. 环绕 @untitledui/icons 在稳定接合后,加上任何Flipdish特定自定义图标.
import { SearchLg } from "@flipdish/ui-icons";
内部设计体系,公开发布. 为Flipdish产品所建,在Flipdish微前端共享;为此在公共npm注册处而不是作为通用图标库.
Flipdish设计系统的一部分:
| 软件包 | 目的 |
|---|---|
@flipdish/ui-tokens | 设计符号——颜色、类型尺度、间隔 |
@flipdish/ui-icons | 图标集( 本软件包) |
@flipdish/ui-library | 构成部分 |
@flipdish/ui-connected | API 连接组件 |
安装
pnpm add @flipdish/ui-icons
react 是唯一的对等依赖(相片是React组件;您提供了React).
使用量
偏好每只小米的子道——在网络上和回放原生体上相同,也是唯一的形式 metro上的树摇(根管将列出的每个图标拉入本地捆绑) :
import { SearchLg } from "@flipdish/ui-icons/SearchLg";
import { PlaceholderIcon } from "@flipdish/ui-icons/PlaceholderIcon";
<SearchLg className="size-5 text-secondary" />;
Root 导入仍然对 Web 有效( 和 routed 的本地子集 )
src/index.native.ts:
import { SearchLg, FileIcon, PlaceholderIcon } from "@flipdish/ui-icons";
在网络上,图标采用标准 SVGProps<SVGSVGElement>,使用时 currentColor大小
通过道具/用具——所以它们通过语义符号公用重新着色(text-*和阴暗
模式为免费。 所命名的无害环境管理出口在生产结构中保持可树动性(本套产品和
@untitledui/icons 都声明 sideEffects: false) (中文(简体) ).
在土著反应中 react-native 导出条件选择 a react-native-svg 构建
建造时从上游生成(scripts/generate-icons.mjs因此,每一个上游
图标通过其子路径提供。 原生图标取用 size 编号 : color 编号 : strokeWidth 相当
比网络 width 编号 : height 编号 : SVGProps默认值 color 是一个光模代表
fg-quaternary (单位:千美元)#a3a3a3; 通过 color 明确当父组件知道
符号 。 六个方向图标只带网络 data-rtl-flip 丢入属性
本地的——RTL镜像是消费屏幕的责任.
为什么一个单独的包
- 精益组件库 ——图标集大而版本独立;将其捆入
@flipdish/ui-library{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}每个消费者都会大叫 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}不管他们用的是什么图标. - 稳定接合 - 消费者从
@flipdish/ui-icons;支持源可以不中断导入站点而改变. - 跨平台准备 ——隔离图标保存最终的网络(SVG)+回放原生(
react-native-svg)从组件层分出.
更改日志
见 变动情况 为释放历史.
捐款
这个包裹住在 flipdish-design-system 单相机 撰稿人文件——包括如何添加或推翻一个图标——与该地的资料来源并存.