Icon
July 22, 2021 ยท View on GitHub
Displays an icon (image or SVG).
Main features
- Set SVG or image
- Set size
- Create round avatar portrait image
Usage
Options
Icon options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| svg | either src or svg must be passed | Object | SVG options object | |
| src | either src or svg must be passed | String | Icon image; creates an img element | |
| size | optional | String | "regular" | Sets the size: either "small" (16px), "regular" (24px), "medium" (32px), "large" (40px). Adds CSS class pe-icon--small, etcetera |
| avatar | optional | Boolean | Set to true to add class pe-icon--avatar which creates a round portrait image |
Common component options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-icon | |
| content | optional | String, hyperscript or component | Any content; replaces children and ignores svg | |
| element | optional | String | "div" | HTML element tag |
| id | optional | String | HTML element id | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Composition
Icon is composed from:
- SVG (when using option
svg)