Icon Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
- 1 Overview
- 2 Selector
- 2.1 Attributes
- 2.2 Icon Names
- 3 CSS Variables
- 4 Data Model
- 5 Default Template
Overview
The Icon component renders an SVG image inline with text content.
Selector
The selector for this component is <hawksearch-icon>.
Attributes
Attribute | Type | Default Value | Required |
|---|---|---|---|
name | Â | Yes | |
size | String or number | 1em | No |
The size attribute determines the height and width of the icon.
Icon Names
The IconType enum lists the icons available to use with this component:
type IconName =
| 'chevron-back'
| 'chevron-down'
| 'chevron-forward'
| 'chevron-left'
| 'chevron-right'
| 'chevron-up'
| 'cross'
| 'help'
| 'minus'
| 'plus'
| 'star';CSS Variables
The following CSS classes are available that allow you to bypass the Shadow DOM and customize the appearance of this component without overriding the Handlebars template:
Variable | Default Value |
|---|---|
--icon-font-size |
|
--icon-color |
|
Data Model
The following data model is exposed to the Handlebars template:
{
svg: string,
url: string,
height: string,
width: string
}Default Template
{{html svg}}
<svg height="{{height}}" width="{{width}}" focusable="false" aria-hidden="true" class="icon">
<use href="{{url}}"></use>
</svg>