Componente de Icons
¿Qué es el componente de Icons?
El componente de Icons permite mostrar iconos de Bootstrap en tu aplicación. Nota: Los iconos utilizados son de Bootstrap Icons, por lo que puedes consultar su documentación oficial para ver todos los iconos disponibles.
¿Cómo se utiliza el componente de Icons?
Para utilizar el componente de Icons, se debe importar y luego usar en el código.
import Icon, { IconName, IconStyle } from "@seigenta/TypesCraft/widgets/icons/icon";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
// El resto de tu código
new Icon({
icon: IconName.heart,
style: new IconStyle({
color: Color.red(), // Added parentheses
size: Size.px(24)
}),
id: "mi-icono",
key: "icono-1"
})
En el ejemplo anterior, se crea un nuevo componente de Icon con un icono de corazón de color rojo y tamaño de 24px.
IconName
El componente Icon puede recibir el nombre del icono de dos formas:
- Como enum IconName - Utilizando el enum predefinido que contiene muchos iconos comunes
- Como string - Utilizando directamente el nombre del icono de Bootstrap Icons
Algunos de los iconos predefinidos en el enum IconName son:
También existen versiones "fill" de muchos iconos, como:
Si necesitas un icono que no está en el enum, puedes usar directamente el nombre del icono de Bootstrap Icons como string:
new Icon({
icon: "emoji-smile", // Usando directamente el nombre del icono de Bootstrap
style: new IconStyle({
color: Color.yellow(), // Added parentheses
size: Size.px(24)
})
})
Puedes consultar todos los iconos disponibles en la documentación oficial de Bootstrap Icons.
Estilos
El componente Icon tiene sus propias variables de estilo a través de la clase IconStyle.
- size?: (Size) - Define el tamaño del icono.
- Size - Puede ser en píxeles, porcentaje, etc. Se explica en Size.
- color?: (Color) - Define el color del icono.
- Color - Puede ser un color en formato hexadecimal o un color de la paleta de colores. Se explica en Color.
Ejemplo
import Icon, { IconName, IconStyle } from "@seigenta/TypesCraft/widgets/icons/icon";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
import Container, { ContainerStyle, ContainerAlingment } from "@seigenta/TypesCraft/widgets/containers/container";
import Flex, { FlexStyle, FlexDirection } from "@seigenta/TypesCraft/widgets/containers/flex";
import Text, { TextStyle } from "@seigenta/TypesCraft/widgets/texts/text";
import { FontWeight } from "@seigenta/TypesCraft/widgets/utils/font";
import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edge-size";
// Ejemplo de un icono simple
new Icon({
icon: IconName.heart,
style: new IconStyle({
color: Color.red(), // Added parentheses
size: Size.px(32)
})
})
// Ejemplo de un icono con texto en un contenedor
new Container({
child: new Flex({
children: [
new Icon({
icon: IconName.info,
style: new IconStyle({
color: Color.blue(),
size: Size.px(24)
})
}),
new Text({
text: "Información importante",
style: new TextStyle({
color: Color.blue(),
fontSize: Size.px(16),
fontWeight: FontWeight.bold
})
})
],
style: new FlexStyle({
direction: FlexDirection.row,
spacing: Size.px(10)
})
}),
style: new ContainerStyle({
backgroundColor: Color.hex("#e6f7ff"),
padding: EdgeSize.all(Size.px(16)),
borderRadius: Size.px(8),
containerAlingment: ContainerAlingment.leftCenter
})
})
// Ejemplo de varios iconos con diferentes estilos
new Flex({
children: [
new Icon({
icon: IconName.star,
style: new IconStyle({
color: Color.yellow(),
size: Size.px(24)
})
}),
new Icon({
icon: IconName.starFill,
style: new IconStyle({
color: Color.yellow(),
size: Size.px(24)
})
}),
new Icon({
icon: IconName.heart,
style: new IconStyle({
color: Color.red(),
size: Size.px(24)
})
}),
new Icon({
icon: IconName.heartFill,
style: new IconStyle({
color: Color.red(),
size: Size.px(24)
})
})
],
style: new FlexStyle({
direction: FlexDirection.row,
spacing: Size.px(20)
})
})
En estos ejemplos, se muestran diferentes formas de utilizar el componente Icon, desde un icono simple hasta combinaciones con otros componentes como Container, Flex y Text.
Compilador de Icons
Este compilador te permite crear componentes de iconos en tiempo real.