Icon

Icon component makes it easy to place icons images in various places (e.g. within text or ) where each icon can have different size, image, size, accessibility label and can be a variation of the original icon image by flipping it in X/Y axis.

Examples (7)

Example	Code
	`<as-icon name="pen" size="xxxl" color="--as-color-status-error" label="There's been an error"></as-icon>`
	`<as-icon name="user" size="xxl" color="--as-color-status-success"></as-icon>`
	`<as-icon name="paperclip" size="xl" color="blue"></as-icon>`
	`<as-icon name="--as-icon-document-signature" size="xl" color="#BADA55"></as-icon>`
	`<as-icon flip-y></as-icon>`
	`<as-icon rotate="2.25turn"></as-icon><as-icon rotate="-37deg"></as-icon>`
	`<as-icon image name="shutter" flip-x size="xxxl" rotate="-37deg"></as-icon>`

Properties (8)

Property name	Description	Type
name	Required: Name of the icon either as CSS var (e.g. --as-icon-document-solid) or without --as-icon- prefix. Name of the icon must be defined as CSS variable and contain SVG code as base64 string.	string
size	Optional: Size of the icon component. Defaults to size "m"	xs \| s \| m \| default \| l \| xl \| xxl \| xxxl
color	Optional: Colour of the icon. Colour can be any valid colour by name, hex value or passed as CSS var. Defaults to --as-color-text	string
label	Optional: An accessible label for the icon. If no label is supplied, the icon is hidden from assistive technology.	string
flip-x	Optional: Flips icon image horizontally. Can be used together with [flip-y] property.	string
flip-y	Optional: Flips icon image vertically. Can be used together with [flip-x] property.	string
rotate	Optional: Rotates icon by whatever angle is specified. Numeric value can be in [deg], [turns] or [rad]. Can be a negative value. Unit must be specified.	number + unit
image	Optional: When present renders icon as image element. Useful when we SVG's we hold as CSS variables were multi-colour initially.	string

Files