Icon
An icon is a small visual element, like a symbol, that represents certain functions, features, or types of content within a user interface.
import {Icon} from "@qualcomm-ui/react/icon"Overview
QUI components use icons from Lucide, an open-source fork of Feather Icons.
Many components like the Button, Icon Button, and Text Input have built-in support for Lucide Icons.
Examples
Provider
Use the provideIcons utility function to register icons. Provided icons are matched by their string name.
Qualcomm
import {Component} from "@angular/core"
import {ExternalLink, MonitorSpeaker, SatelliteDish} from "lucide-angular"
import {IconDirective} from "@qualcomm-ui/angular/icon"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
@Component({
imports: [IconDirective],
providers: [provideIcons({ExternalLink, MonitorSpeaker, SatelliteDish})],
selector: "icon-provider-demo",
standalone: true,
template: `
<div class="text-foreground-primary flex justify-center gap-4">
<svg aria-label="Link" qIcon="ExternalLink" size="lg"></svg>
<svg aria-label="Search" qIcon="MonitorSpeaker" size="lg"></svg>
<svg aria-label="Eye" qIcon="SatelliteDish" size="lg"></svg>
</div>
`,
})
export class IconProviderDemo {}
Sizes
Size can be customized using the size input. There are five available values: xs, sm, md, lg, xl. Should you need more control over the rendered size, supply a number instead which will be converted to pixels.
Qualcomm
<svg qIcon="ExternalLink" size="xs"></svg>
<svg qIcon="ExternalLink" size="sm"></svg>
<svg qIcon="ExternalLink" size="md"></svg>
<svg qIcon="ExternalLink" size="lg"></svg>
<svg qIcon="ExternalLink" size="xl"></svg>
<svg qIcon="ExternalLink" size="32px"></svg>
<svg qIcon="ExternalLink" size="42px"></svg>API
svg[qIcon]
The properties of the <svg> element also apply.
| Prop | Type | Default |
|---|---|---|
Lucide Icon or string. | | LucideIconData | |
| string | ||
| 'xs' | 'md' | |
string | '0 0 24 24' | |
| string | ||
string | 'http://www.w3.org/2000/svg' |
Type
| LucideIconData
| string
Description
Lucide Icon or string.
Type
| string
| number
Description
Force the height of the icon. This typically isn't required. You should prefer
the size property for customization instead.
Type
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| string
| number
Description
Type
| string
| number
Description
Force the width of the icon. This typically isn't required. You should prefer
the size property for customization instead.