diff --git a/README.md b/README.md index 2f1789cc971adde3f17b0caa87bb4f55a3e4a55d..46f90cadc8b39ece9236161d6251105977a1ec6f 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,7 @@ | 121 | [styled-system](https://github.com/react-native-picker/picker "https://github.com/react-native-picker/picker") | 5.1.5 | \- | \- | [链接](/zh-cn/styled-system) | | 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-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/README.md b/zh-cn/README.md index ef1c8dacf5a0acf14d6acbc8fc81251476bd3bab..e20b3f6cf40a402da3e0df50dc48ef70356ffeea 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -143,6 +143,7 @@ | 121 | [styled-system](https://github.com/react-native-picker/picker "https://github.com/react-native-picker/picker") | 5.1.5 | \- | \- | [链接](/zh-cn/styled-system) | | 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-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..a0b3da3b23ff2ef25a4140c2fee6348df919a619 --- /dev/null +++ b/zh-cn/react-native-feather.md @@ -0,0 +1,104 @@ +> 模板版本:v0.1.3 + +

+

react-native-feather

+

+

+ + License + + +

+ + + + + +> [!TIP] [Github 地址](https://github.com/yigithanyucedag/react-native-feather) + +## 安装与使用 + + + +#### **npm** + +```bash +npm i react-native-feather +``` + +#### **yarn** + +```bash +yarn add react-native-feather +``` + + + +下面的代码展示了这个库的基本使用场景: + +此库可以使用的[图标列表](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; +``` + +## 约束与限制 + +### 兼容性 + +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. 在使用该库前,请保证已经安装 [`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。 \ No newline at end of file