# new IconPicker(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myIconPicker = document.createElement("a-iconpicker").init(config)
Or use the shorthand for it:
const myIconPicker = createIconPicker({
value: "fas fa-check",
columns: 10,
action: (iconClass) => console.log(iconClass)
})
myIconPicker.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "iconPicker",
value: "fas fa-check",
columns: 10,
action: (iconClass) => console.log(iconClass)
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
value |
string
|
<optional> |
The default icon class name. Ex: "fas fa-check" |
icons |
Array.<string>
|
<optional> |
Optional array of icon classes to use. Ex: ["fas fa-check", "fas fa-user"] |
autoFocus |
function
|
<optional> |
Automatically scroll down to the selected icon if true (default false) |
action |
function
|
<optional> |
Function executed when an icon is selected. Receives the selected icon class as an argument. |
columns |
Array.<object>
|
<optional> |
Nnumber of columns to display the icons |
iconSize |
string
|
<optional> |
Size of the icons. Ex: "16px" |
selectorSize |
string
|
<optional> |
Should be greater than the icon size. Ex: "32px" |
selectorBorderRadius |
string
|
<optional> |
Ex: "10px" |
background |
string
|
<optional> |
|
backgroundColor |
string
|
<optional> |
|
backgroundColorSelected |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
maxWidth |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
maxHeight |
string
|
number
|
<optional> |
|
padding |
string
|
<optional> |
|
margin |
string
|
<optional> |
|
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
string
|
<optional> |
|
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
boxShadow |
string
|
<optional> |
|
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
this
Generated markup
<a-iconpicker class="a-iconpicker">
<!-- For each icon selector -->
<span class="icon-selector"></span>
</a-iconpicker>
Methods
# getValue() → {string}
Get the current selected icon class
The icon class. At the moment, we use Font Awesome. Example: "fas fa-check"
string
# setColor(newBackgroundColor)
Set a new background color for the selected icon
Parameters:
| Name | Type | Description |
|---|---|---|
newBackgroundColor |
string
|
Color background to set under the selected icon |
this
# setValue(iconClass, newBackgroundColoropt, rawUpdateopt)
Set a new icon
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
iconClass |
string
|
Ex: "fas fa-check" |
|
newBackgroundColor |
string
|
<optional> |
Optional background color to set under the selected icon |
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this