@fluentui/反应- native-icons

Fleent System Icons是微软公司收藏的熟悉,友好和现代的图标. 此软件包提供按键的原始组件 react-native-svg。 。 。 .

安装

yarn add @fluentui/react-native-icons react-native-svg

软件包需要反应 >=18.2.0 <20.0.0原生状态 >=0.73.0,以及 react-native-svg >=12.5.0选择一个 react-native-svg 与您的 React 本地版本兼容的版本并遵循其 安装指令,包括必要的本土设置. 用于博览会 npx expo install react-native-svg 以选择兼容的版本.

使用量

从包根导入图标名称 。 大多数家庭提供 Filled 财务报告和审定财务报表 Regular 样式; 选定的图标也提供 Light 或多颜色 Color 样式。 不是每个家庭都有各种风格或大小.

import { View } from 'react-native';
import { AccessTimeFilled, AccessTime20Regular, AddCircleColor } from '@fluentui/react-native-icons';

export function IconExamples() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <AccessTimeFilled primaryFill="#212121" />
      <AccessTimeFilled width={32} height={32} primaryFill="#0078d4" />
      <AccessTime20Regular primaryFill="#212121" title="Time" />
      <AddCircleColor title="Add" />
    </View>
  );
}

大小

可调整图标从名称中省略大小, 例如 AccessTimeFilled他们通常使用20个单元的艺术品和取景盒,这些艺术品和取景盒是: 24倒计时 默认,不 1em设置 width 财务报告和审定财务报表 height 在不更改视图的情况下缩放它们.

大小 : AccessTime20Regular 或者说 AccessTime24Filled它们使用为尺寸设计的艺术品,并默认这些维度。 在固定大小的渲染时优先选择匹配大小的变体. 原有的非平面尺寸和非标准视图Boxes酌情保留.

生成图标道具扩展 SvgProps 从 react-native-svg启用 width, (中文(简体) ), height,并在必要时, viewBox 以覆盖几何。 这个 size 方便道具属于 FluentSvg 工具,而不是生成的图标道具类型.

颜色和造型

使用 primaryFill 用于主要单色颜色。 默认为 currentColor,所以SVG color 道具也可以提供该颜色 :

<>
  <AccessTimeFilled primaryFill="#0078d4" />
  <AccessTimeFilled color="#0078d4" />
</>

primaryFill 优于原始数据 fill 道具 (英语). 通过 fill 单独不改变主图标颜色。 彩色图标和明确彩色的细节保留了被作者的填充和梯度,而不是被统一地重彩.

标准 react-native-svg 道具,包括: style,则支持。 此软件包不提供网络软件包的 CSS 类, Griffel 样式, 或 bundleIcon API (英语). 选择 Filled 或者说 Regular 用于切换艺术品的组件 filled prob不切换 SVG 变体.

无障碍

使用 title 要给一个有意义的图标一个可访问的名称。 它的地图是 aria-label,不作为 SVG 提供 <title> 键。 图标带有 title, (中文(简体) ), aria-label,或 aria-labelledby 被指派 role="img"; 未命名图标被标记 aria-hidden。 。 。 .

对于已经贴上标签的按钮或其他控件内的图标,请将图标不命名并放入控件上.

公用事业和自定义图标

这个 @fluentui/react-native-icons/utils 出入口出口 FluentSvg, (中文(简体) ), useIconState,以及 wrapIcon,加上 FluentSvgProps 财务报告和审定财务报表 FluentIconsProps 类型.

FluentSvg 应用与生成图标相同的颜色和无障碍行为。 无 size,默认为24乘以24的取景口和 viewBox="0 0 20 20"与 size,其默认宽度、高度和视图框均使用该大小。 明确 width, (中文(简体) ), height,以及 viewBox 价值观优先.

import { Path } from 'react-native-svg';
import { FluentSvg } from '@fluentui/react-native-icons/utils';
import type { FluentIconsProps } from '@fluentui/react-native-icons/utils';

export function DiamondIcon(props: FluentIconsProps) {
  return (
    <FluentSvg size={20} {...props}>
      <Path d="M10 2 18 10 10 18 2 10Z" />
    </FluentSvg>
  );
}

这里的路径继承了根填充, 所以 primaryFill 工作时没有过路填充表达式。 当自定义的艺术品需要多颜色或其他 SVG 涂料行为时, 保留明确的填充.

useIconState 使颜色和无障碍道具正常化. wrapIcon 仍然可供兼容,但生成的图标不再使用. useIconState, (中文(简体) ), wrapIcon,则 FluentIconsProps 类型也仍然从软件包根导出.

软件包输出和代码生成

该一揽子方案在下列领域提供无害环境管理: lib/ 和常见JS 中 lib-cjs/,带有 TypeScript 声明。 软件包导出选择适当的格式 。 使用公共根并 /utils 切入点而不是内部生成的块路径 .

这个 convert:rnsvg 步骤从准备中的 SVG 生成组件 intermediate/数字 :

• 每个图标 FluentSvg 直接使用一个推断的组件名称而不是生成 displayName 任务.
• 使用平方大小图标 size; 默认尺寸和相容视图框被省略.
• 简单的单色形状继承了根填充. 复杂的艺术品在需要时保留了明确的填料.
• 符合条件的可重塑和大小为20的组件生活在相同的块并共享路径数据字符串,没有额外的图标组件层. 当共享会增加代码大小时, 短路径会继续内置 .
• 桶的使用 export *;大小块再出口合用地块组件,以保留已存在的束缚.

图标仍被分组成块。 命名的导入和无副作用模块允许在所支持的地方进行树摇动,但应用程序中包含的代码取决于其捆绑器.

发展

使用寄存器的Yarn 4设置有Node.js 22或24. 从寄存器根 :

corepack enable
yarn install --immutable

若为 packages/react-native-icons/intermediate/ 尚未先准备、生成和优化 SVG 输入 :

yarn nx run react-native-icons:copy
yarn nx run react-native-icons:optimize
yarn nx run react-native-icons:unfill

对于代码生成和仅基于无害环境管理的构建:

yarn nx run react-native-icons:convert:rnsvg
yarn nx run react-native-icons:build:esm
yarn nx run react-native-icons:test
yarn nx run react-native-icons:lint

build:esm 只运行 TypeScript; 它不会重生图标 。 套件采用TypeScript 7,目标为ES2022,并采用自动回放JSX变换(react-jsx) (中文(简体) ). build:cjs 单独发布普通JS,而完整 build 脚本刷新SVG输入并构建两种格式.

编辑源资产, convert-rn.js,或酌情手写公用事业。 不要手动编辑生成的文件 src/icons/, (中文(简体) ), src/sizedIcons/, (中文(简体) ), src/index.tsx, (中文(简体) ), lib/,或 lib-cjs/。 。 。 .