1
00:00:02,300 --> 00:00:05,320
Agregar iconos es súper sencillo en una aplicación

2
00:00:05,330 --> 00:00:07,760
React Native que usa expo.

3
00:00:08,060 --> 00:00:09,670
Por cierto, podemos

4
00:00:09,670 --> 00:00:11,530
deshacernos de la importación del

5
00:00:11,900 --> 00:00:18,830
botón, ya no necesitamos el botón incorporado, sino volver a los iconos porque se puede agregar un

6
00:00:18,980 --> 00:00:23,180
icono importando algo y ahora es @ expo / vector-icons.

7
00:00:23,180 --> 00:00:26,410
Puede ser un nombre de paquete un poco extraño, pero

8
00:00:26,420 --> 00:00:31,910
eso es exactamente lo que es, es parte del kit de herramientas de la expo, por así decirlo,

9
00:00:31,910 --> 00:00:33,260
se incluye automáticamente

10
00:00:33,500 --> 00:00:40,250
en cualquier proyecto React Native que creaste con expo y allí puedes importar componentes que te ayuden a renderizar íconos y

11
00:00:40,250 --> 00:00:45,920
Un componente bastante agradable es el componente de ionicones. Para eso, simplemente debe saber que existen diferentes conjuntos de iconos que

12
00:00:45,920 --> 00:00:52,790
están integrados en la exposición o en este paquete de iconos vectoriales para ser precisos. Ionicons es un conjunto de iconos administrados por el equipo detrás

13
00:00:52,820 --> 00:00:58,490
de ionic al final, por lo que los iconos que se incluyen en ese conjunto son administrados por

14
00:00:58,490 --> 00:01:02,450
ese equipo iónico y realmente solo estoy hablando de los iconos aquí, esto

15
00:01:02,450 --> 00:01:08,300
no tiene nada que ver con nosotros agregando cualquier cosa, desde iónico a la aplicación React Native, solo estamos

16
00:01:08,300 --> 00:01:09,650
usando sus íconos.

17
00:01:09,650 --> 00:01:16,080
También tiene otros conjuntos de iconos como iconos malvados, iconos de materiales, por lo que una gran cantidad de conjuntos de

18
00:01:16,190 --> 00:01:22,520
iconos que puede usar y un excelente lugar para aprender sobre todos los iconos incluidos y obtener una visión general

19
00:01:22,520 --> 00:01:27,680
de todos los iconos incluidos es la documentación oficial de los iconos de exposición que encontrará

20
00:01:27,680 --> 00:01:34,270
adjunto a este video también, un enlace a esta documentación y allí no solo puede aprender más sobre cómo usarlos, sino

21
00:01:34,270 --> 00:01:40,460
que también encontrará ese enlace al directorio de iconos y esa es una larga lista de todos los iconos incluidos

22
00:01:40,470 --> 00:01:45,110
que puede use y siempre vea a qué paquete de íconos pertenece, también puede

23
00:01:45,110 --> 00:01:50,030
buscar íconos como eliminar para encontrar todos los íconos que tengan algo que ver con

24
00:01:50,030 --> 00:01:55,070
eliminar cosas y luego verá que hay algo del paquete de ionicons, algo del material paquete

25
00:01:55,070 --> 00:01:56,820
de iconos y así sucesivamente.

26
00:01:57,140 --> 00:02:01,820
Ahora los íconos que busqué por adelantado son del paquete de ionicones.

27
00:02:01,820 --> 00:02:07,040
Entonces, aquí importaré ionicons desde @ expo / vector-icons y esto ahora es automáticamente un componente

28
00:02:07,040 --> 00:02:10,830
que podemos usar en nuestro código jsx para generar un icono y

29
00:02:10,940 --> 00:02:15,820
si hubiéramos usado iconos de material, también sería un componente solo para generar un icono

30
00:02:15,820 --> 00:02:16,270
de

31
00:02:16,340 --> 00:02:22,810
material pero quiero usar un icono de ionicon, así que lo usaré y ahora iré al código jsx y en lugar

32
00:02:22,810 --> 00:02:30,040
de usar un valor más bajo aquí, en realidad generaré un icono de ionicon, un icono aquí en mi botón y lo mejor

33
00:02:30,040 --> 00:02:36,250
es que un ícono de este tipo aquí también se puede anidar en nuestro botón, aunque lo que estamos

34
00:02:36,250 --> 00:02:43,930
generando aquí, accesorios secundarios, es en lugar de un nodo de texto, pero eso es compatible, puede generar un componente de ícono en ese

35
00:02:43,930 --> 00:02:46,290
componente de texto también, para que funcione.

36
00:02:47,140 --> 00:02:51,910
Sin embargo, volviendo a este ionicon aquí, en este momento no estoy diciendo nada

37
00:02:52,390 --> 00:02:58,400
sobre el ícono que quiero usar y allí, el ícono que elegí de antemano tiene un nombre de md-remove.

38
00:02:58,900 --> 00:03:06,430
Ahora le dice a React Native y una especie de exposición que desea usar ese ícono agregando el nombre prop aquí en ionicons

39
00:03:06,520 --> 00:03:12,520
y luego esto toma una cadena con el nombre del ícono que encuentra en ese directorio, ¿verdad?

40
00:03:12,550 --> 00:03:15,970
Así que aquí elegí este ícono que quiero

41
00:03:16,000 --> 00:03:20,440
usar, así que ese es el nombre, md-remove que ahora usamos aquí.

42
00:03:20,530 --> 00:03:22,520
Así que ese es el nombre del ícono que agregamos aquí.

43
00:03:22,600 --> 00:03:28,660
A continuación, también puede configurar el tamaño del icono en píxeles y aquí iré con 24 para tener un bonito icono grande y también

44
00:03:28,660 --> 00:03:33,250
el color que este icono debería tener y aquí, configuraré esto para que tenga un color blanco.

45
00:03:33,280 --> 00:03:38,920
Ahora copiaré eso y usaré el mismo en el botón mayor, pero por supuesto, el ícono es

46
00:03:38,920 --> 00:03:39,320
diferente,

47
00:03:39,340 --> 00:03:45,580
aquí elegí md-add como ícono y, por supuesto, puedes explorar esa lista de íconos y elegir diferentes íconos

48
00:03:45,610 --> 00:03:50,650
si desea y también puede probar paquetes de iconos diferentes en lugar de ionicones o

49
00:03:50,650 --> 00:03:54,830
incluso usar dos paquetes de iconos diferentes en un mismo componente.

50
00:03:54,850 --> 00:03:59,650
No tiene que apegarse a un solo paquete de íconos, puede mezclarlos y combinarlos como desee,

51
00:03:59,650 --> 00:04:04,150
para que podamos renderizar un ionicon aquí y renderizar un ícono de material aquí, pero por

52
00:04:04,150 --> 00:04:08,350
supuesto debe asegurarse de que el aspecto general de su aplicación haga sentido.

53
00:04:08,350 --> 00:04:13,840
Entonces, si está mezclando íconos demasiado, es probable que no se vea tan bien, por lo que

54
00:04:13,840 --> 00:04:18,160
generalmente desea quedarse en un conjunto, pero técnicamente no tiene que hacerlo.

55
00:04:18,190 --> 00:04:23,500
Así que aquí, elegí estos dos íconos y ahora con eso, si guardamos esto, comenzamos un nuevo juego aquí.

56
00:04:23,500 --> 00:04:30,190
Ahora tenemos un ícono más y un ícono menos aquí para indicar si los números deben ser más bajos o más altos

57
00:04:30,190 --> 00:04:36,100
y eso es bastante bueno en mi opinión porque eso nos da una forma completamente nueva de construir interfaces de

58
00:04:36,430 --> 00:04:41,380
usuario porque con íconos, realmente tenemos otra herramienta importante para construir grandes experiencias de usuario.