From c7c690e2466daf7b9c3f3a23ff5d93b425e4574a Mon Sep 17 00:00:00 2001 From: 17691002584 <17691002584@163.com> Date: Sat, 13 Jul 2024 14:39:53 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20[#IACQDI]=20=E6=96=B0=E5=A2=9Ereact?= =?UTF-8?q?-native-largelist=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3=20docs:?= =?UTF-8?q?=20[#IACQDI]=20=E4=BF=AE=E6=94=B9react-native-vector-icons?= =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-vector-icons.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index 026ef23f..a1e499ee 100644 --- a/zh-cn/react-native-vector-icons.md +++ b/zh-cn/react-native-vector-icons.md @@ -1,5 +1,5 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.2.2

react-native-vector-icons

@@ -502,9 +502,9 @@ export function VectorIconsDemo() { ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： -请使用 Api 11 及以上版本，低版本会导致font注册不成功，图标显示不出来。 +1.RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25; ## 遗留问题 -- Gitee From 0cce60295e020017d4ff93666d3866da9ee3fdaa Mon Sep 17 00:00:00 2001 From: 17691002584 <17691002584@163.com> Date: Thu, 18 Jul 2024 11:26:58 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20[#IACQDI]=20=E4=BF=AE=E6=94=B9react?= =?UTF-8?q?-native-vector-icons=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-vector-icons.md | 166 +---------------------------- 1 file changed, 4 insertions(+), 162 deletions(-) diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index a1e499ee..d5d28e81 100644 --- a/zh-cn/react-native-vector-icons.md +++ b/zh-cn/react-native-vector-icons.md @@ -6,14 +6,12 @@

- Supported platforms + Supported platforms License -

- > [!TIP] [Github 地址](https://github.com/oblador/react-native-vector-icons) ## 安装与使用 @@ -36,113 +34,13 @@ yarn add react-native-vector-icons@10.0.3 -### 基本使用 - -#### 自带字体图标对照网页 - -[Explore all icons](https://oblador.github.io/react-native-vector-icons/). - -- [`AntDesign`](https://ant.design/) from AntFinance (*298* icons) -- [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with *411* icons) -- [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin & Roman Shamin (v1.10.1 with *70* icons) -- [`Feather`](http://feathericons.com) created by Cole Bemis & Contributors (v4.28.0 featuring *286* icons) -- [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0 containing *675* icons) -- [`FontAwesome 5`](https://fontawesome.com/v5/icons/) from Fonticons, Inc. (v5.15.3 offering *1598* free and *7848* pro icons) -- [`FontAwesome 6`](https://fontawesome.com) designed by Fonticons, Inc. (v6.1.2 featuring *2016* free and *16150* pro icons) -- [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring *615* icons) -- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with *283* icons) -- [`Ionicons`](https://ionicons.com/) crafted by Ionic (v7.1.0 containing *1338* icons) -- [`MaterialIcons`](https://fonts.google.com/icons/) by Google, Inc. (v4.0.0 featuring *2189* icons) -- [`MaterialCommunityIcons`](https://materialdesignicons.com/) from MaterialDesignIcons.com (v6.5.95 including *6596* icons) -- [`Octicons`](http://octicons.github.com) designed by Github, Inc. (v16.3.1 with *250* icons) -- [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.4.0 with *100* icons) -- [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir & Contributors (v2.5.5 with *189* icons) - -### 本库自带字体的使用 - -```js -import FontAwesome from 'react-native-vector-icons/FontAwesome'; - - - -``` - -### 外部字体使用 -使用外部字体时，不管是用户自己制作的字体文件还是从网站下载的字体文件，都需要有 *.ttf 和 *.json 文件(文件目录不固定，能引用到就可以了) +下面的代码展示了这个库的基本使用场景： -#### 用户自制字体文件 -用户自己制作的字体文件导入使用，以下字体文件名和字体家族名仅供参考，以用户实际输出字体文件信息为准 +> [!WARNING] 使用时 import 的库名不变。 ```js import { createIconSet } from 'react-native-vector-icons'; -const CustomTest = createIconSet( - require('../assets/fonts/test.json'), - 'poppy-icon', - '../assets/fonts/test.ttf', - ); - - - -``` - -#### [fontello](http://fontello.com)网站中的字体使用 -从[fontello](http://fontello.com)网站选择合适的字体之后下载对应的字体文件和配置文件导入使用 - -```js -import { createIconSetFromFontello } from 'react-native-vector-icons'; -import fontelloConfig from '../assets/fonts/config.json'; - -const CustomFontello = createIconSetFromFontello( - fontelloConfig, - 'fontello', - '../assets/fonts/fontello.ttf', - ); - - - -``` - -#### [IcoMoon](https://icomoon.io/app)网站中的字体使用 -从[IcoMoon](https://icomoon.io/app)网站选择合适的字体之后下载对应的字体文件和配置文件导入使用 - -```js -import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; -import icoMoonConfig from '../assets/fonts/selection.json'; - -const CustomFontIcoMoon = createIconSetFromIcoMoon( - icoMoonConfig, - 'icomoon', - '../assets/fonts/icomoon.ttf', - ); - - - -``` - -### 以下展示了本库的基本用法 - -```js -import React from 'react'; -import {ScrollView} from 'react-native'; - -//导入原库自带字体 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; import Fontisto from 'react-native-vector-icons/Fontisto'; @@ -159,67 +57,10 @@ import EvilIcons from 'react-native-vector-icons/EvilIcons'; import Feather from 'react-native-vector-icons/Feather'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; - -import { createIconSetFromIcoMoon, createIconSetFromFontello, createIconSet } from 'react-native-vector-icons'; -import icoMoonConfig from '../assets/fonts/icomoon-selection.json'; -import fontelloConfig from '../assets/fonts/fontello-config.json'; - export function VectorIconsDemo() { - //引入用户自制字体 - const CustomTest = createIconSet( - require('../assets/fonts/test.json'), - 'poppy-icon', - '../assets/fonts/test.ttf', - ); - - //引入 IcoMoon 自定义字体 - const CustomIconMoon = createIconSetFromIcoMoon( - icoMoonConfig, - 'icomoon', - '../assets/fonts/icomoon.ttf' - ); - - //引入 fontello 自定义字体 - const CustomFontello = createIconSetFromFontello( - fontelloConfig, - 'fontello', - '../assets/fonts/fontello.ttf' - ); - return ( - - - CustomTest application-record - - - - CustomTest to-do - - - - CustomIconMoon home2 - - - - CustomFontello emo-happy - - ); } + ``` ## Link -- Gitee From 873342ecf160274e4df823dcb82a22a5a49d522f Mon Sep 17 00:00:00 2001 From: 17691002584 <17691002584@163.com> Date: Thu, 18 Jul 2024 11:35:26 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20[#IACQDI]=20=E4=BF=AE=E6=94=B9react?= =?UTF-8?q?-native-vector-icons=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-vector-icons.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index d5d28e81..11f3354c 100644 --- a/zh-cn/react-native-vector-icons.md +++ b/zh-cn/react-native-vector-icons.md @@ -12,6 +12,8 @@ License

+ + > [!TIP] [Github 地址](https://github.com/oblador/react-native-vector-icons) ## 安装与使用 -- Gitee