Icon
<gstock-icon>
|
GstockIcon
Color
Los iconos heredan su color del color del texto actual. Por lo tanto, puede
configurar la propiedad color en el elemento
<gstock-icon> o en un antecesor para cambiar el color. Ver
currentcolor keyword.
<div class="success">
<gstock-icon name="alert-triangle"></gstock-icon>
<gstock-icon name="camera"></gstock-icon>
<gstock-icon name="tag"></gstock-icon>
<gstock-icon name="bell"></gstock-icon>
</div>
<div class="information">
<gstock-icon name="alert-triangle"></gstock-icon>
<gstock-icon name="camera"></gstock-icon>
<gstock-icon name="tag"></gstock-icon>
<gstock-icon name="bell"></gstock-icon>
</div>
<div class="warning">
<gstock-icon name="alert-triangle"></gstock-icon>
<gstock-icon name="camera"></gstock-icon>
<gstock-icon name="tag"></gstock-icon>
<gstock-icon name="bell"></gstock-icon>
</div>
<div class="danger">
<gstock-icon name="alert-triangle"></gstock-icon>
<gstock-icon name="camera"></gstock-icon>
<gstock-icon name="tag"></gstock-icon>
<gstock-icon name="bell"></gstock-icon>
</div>
<style>
.success { color: var(--gstock-legacy-color-semantic-success-500); }
.information { color: var(--gstock-legacy-color-semantic-information-500); }
.warning { color: var(--gstock-legacy-color-semantic-warning-500); }
.danger { color: var(--gstock-legacy-color-semantic-danger-500); }
</style>
Tamaño
Utilice el atributo size para cambiar el tamaño del icono.
<div>
<gstock-icon size="xsmall" name="alert-triangle"></gstock-icon>
<gstock-icon size="xsmall" name="camera"></gstock-icon>
<gstock-icon size="xsmall" name="tag"></gstock-icon>
<gstock-icon size="xsmall" name="bell"></gstock-icon>
</div>
<div>
<gstock-icon size="small" name="alert-triangle"></gstock-icon>
<gstock-icon size="small" name="camera"></gstock-icon>
<gstock-icon size="small" name="tag"></gstock-icon>
<gstock-icon size="small" name="bell"></gstock-icon>
</div>
<div>
<gstock-icon size="medium" name="alert-triangle"></gstock-icon>
<gstock-icon size="medium" name="camera"></gstock-icon>
<gstock-icon size="medium" name="tag"></gstock-icon>
<gstock-icon size="medium" name="bell"></gstock-icon>
</div>
<div>
<gstock-icon size="large" name="alert-triangle"></gstock-icon>
<gstock-icon size="large" name="camera"></gstock-icon>
<gstock-icon size="large" name="tag"></gstock-icon>
<gstock-icon size="large" name="bell"></gstock-icon>
</div>
<div>
<gstock-icon size="xlarge" name="alert-triangle"></gstock-icon>
<gstock-icon size="xlarge" name="camera"></gstock-icon>
<gstock-icon size="xlarge" name="tag"></gstock-icon>
<gstock-icon size="xlarge" name="bell"></gstock-icon>
</div>
Iconos personalizados
Los iconos personalizados se pueden cargar individualmente con el atributo src. Solo se admiten los SVG en un punto de conexión local o habilitado para CORS. Si usa más de un icono personalizado, puede que tenga sentido registrar una biblioteca de iconos personalizados.
<gstock-icon src="/dist/assets/weather/day-sunny.svg" size="xlarge"></gstock-icon>