diff --git a/Menu.xlsx b/Menu.xlsx index aea4208f4de9ef5f7c0d86cac6ff71ea0be5d50e..cc4bea6f5e816c20bd7ba28429cf7c14eb2a06c7 100644 Binary files a/Menu.xlsx and b/Menu.xlsx differ diff --git a/README.md b/README.md index c2a9388112e927bee972b10a4a38f0c137b34f18..f21b29e27358cc04afce6c72bf2c5c502d5e4fa8 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,7 @@ | 122 | [react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors) | 7.2.1 | \- | [@react-native-oh-tpl/react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors/releases) | [链接](/zh-cn/react-native-sensors) | | 123 | [react-native-sortable-list](https://github.com/gitim/react-native-sortable-list) | 0.0.25 | \- | [@react-native-oh-tpl/react-native-sortable-list](https://github.com/react-native-oh-library/react-native-sortable-list) | [链接](/zh-cn/react-native-sortable-list) | | 124 | [react-native-image-sequence-2](https://github.com/bwindsor/react-native-image-sequence) | 0.9.1 | 否 | [@react-native-oh-tpl/react-native-image-sequence-2](https://github.com/react-native-oh-library/react-native-image-sequence/releases) | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-sequence-2) | +| 125 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather) | 1.1.2 | \- | \- | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-feather) | ## 社区 diff --git a/_sidebar.md b/_sidebar.md index 8b6d7582901bb2a73d21e283b260b3b417ead5c7..70212ea2b2348c1703a3123752f535c49c9639f9 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -111,6 +111,7 @@ - [react-native-reanimated-carousel](/zh-cn/react-native-reanimated-carousel.md) - [react-native-drag-sort](/zh-cn/react-native-drag-sort.md) - [react-native-sortable-list](/zh-cn/react-native-sortable-list.md) + - [react-native-feather](/zh-cn/react-native-feather.md) - 纯JS库 - [crypto-js](/zh-cn/crypto-js.md) diff --git a/zh-cn/README.md b/zh-cn/README.md index 90531bf815495e9b9b1bbba4f006dc204f5b46ae..cab6ce6bda432e171d942c99ee976edc6caa03b0 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -144,6 +144,7 @@ | 122 | [react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors) | 7.2.1 | \- | [@react-native-oh-tpl/react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors/releases) | [链接](/zh-cn/react-native-sensors) | | 123 | [react-native-sortable-list](https://github.com/gitim/react-native-sortable-list) | 0.0.25 | \- | [@react-native-oh-tpl/react-native-sortable-list](https://github.com/react-native-oh-library/react-native-sortable-list) | [链接](/zh-cn/react-native-sortable-list) | | 124 | [react-native-image-sequence-2](https://github.com/bwindsor/react-native-image-sequence) | 0.9.1 | 否 | [@react-native-oh-tpl/react-native-image-sequence-2](https://github.com/react-native-oh-library/react-native-image-sequence/releases) | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-sequence-2) | +| 125 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather) | 1.1.2 | \- | \- | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-feather) | ## 社区 diff --git a/zh-cn/react-native-feather.md b/zh-cn/react-native-feather.md new file mode 100644 index 0000000000000000000000000000000000000000..98864bfc49d712b001d7b972c19b5a99e498b01e --- /dev/null +++ b/zh-cn/react-native-feather.md @@ -0,0 +1,113 @@ +> 模板版本:v0.2.0 + +

+

react-native-feather

+

+

+ + License + + +

+ + + + + +> [!TIP] [Github 地址](https://github.com/yigithanyucedag/react-native-feather) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install react-native-feather@1.1.2 +``` + +#### **yarn** + +```bash +yarn add react-native-feather@1.1.2 +``` + + + +下面的代码展示了这个库的基本使用场景: + +此库可以使用的[图标列表](https://feathericons.com/) + +>[!WARNING] 使用时 import 的库名不变。且该库强依赖[@react-native-oh-tpl/react-native-svg](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg),请在使用前,安装svg库 + +```js +import React from 'react'; +import {Text, ScrollView } from 'react-native'; +import * as Icon from "react-native-feather"; +//第二种引入方式,可以直接通过组件名称引入 +import { Check } from "react-native-feather"; + + +const FeatherExample = () => { + return ( + + react-native-feather库只是对svg图进行处理的库,以下展示的demo,均只有图片,没有绑定点击事件 + 电池,边线红色,绿色填充,width=150,height=150 + + 菜单栏,边线绿色,宽高默认为25 + + 播放图标,边线默认为当前颜色,填充色为蓝色,宽高为50 + + + 第二种使用方法:对号,颜色为红色,width和height为32 + + + ); +}; + +export default FeatherExample; +``` +## Link + +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码,如已在鸿蒙工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](/zh-cn/react-native-svg.md#link)进行引入 + +## 约束与限制 + +### 兼容性 + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59; +2. RNOH:0.72.20; SDK:HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE:DevEco Studio 5.0.3.200; ROM:2.0.0.18; + +## 属性 + +所有[SVG属性](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg)均可使用 + +### feather + +该库为UI组件库,通过配置属性标签,实现对应的功能。 + +| Prop | Description | Default | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | ------------ | ----------------- | +| width | Width of the icon. | 24 | yes | +| height | Height of the icon. | 24 | yes | +| stroke | The stroke prop refers to the color outline the icon. | currentColor | yes | +| strokeWidth | The strokeWidth prop specifies the width of the outline on the icon. | 2 | yes | +| fill | The fill prop refers to the color inside the icon. | none | yes | + + + +## 遗留问题 + +## 其他 + +以下事项与原库保持一致需注意遵循: + +1. 在使用该库前,请保证按照上文"Link"的提示,已经安装 [`react-native-svg`](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg)。 +2. 此组件包含所有 [`react-native-svg`](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg) 兼容的所有 Feather 图标。 +3. 基于Feather 图标库版本为V4.28.0。 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://www.mit-license.org) ,请自由地享受和参与开源。 \ No newline at end of file