Skip to content

Icon

Construtors

new

local icon = Icon.new()
Constructs an empty 32x32 icon on the topbar.


Methods

set

{chainable}

icon:set(settingName, value, iconState)
Applies a specific setting to an icon. All settings can be found here. If the setting falls under the 'toggleable' category then an iconState can be specified. For most scenarious it's recommended instead to apply settings using themes.


get

local value = icon:get(settingName, iconState)
Retrieves the given settings value. If the setting falls under the 'toggleable' category then an iconState can be specified.


getToggleState

local selectedOrDeselectedString = icon:getToggleState()
Returns the current toggleState, either "deselected" or "selected".


setTheme

{chainable}

icon:setTheme(theme)
Applies a theme to the given icon. See themes for more information.


setEnabled

{chainable}

icon:setEnabled(bool)
When set to false, the icon will be disabled and hidden.


setName

{chainable}

icon:setName(string)
Associates the given name to the icon which enables it to be retrieved with IconController.getIcon(name).


setProperty

{chainable}

icon:setProperty(propertyName, value)
An alternative way of doing zone[propertyName] = value. This enables the easy-configuration of icon properties within chained methods.


select

{chainable}

icon:select()
Selects the icon (as if it were clicked once).


deselect

{chainable}

icon:deselect()
Deselects the icon (as if it were clicked, then clicked again).


notify

{chainable}

icon:notify(clearNoticeEvent)
Prompts a notice bubble which accumulates the further it is prompted. If the icon belongs to a dropdown or menu, then the notice will appear on the parent icon when the parent icon is deselected.


clearNotices

{chainable}

icon:clearNotices()


disableStateOverlay

{chainable}

icon:disableStateOverlay(bool)
When set to true, disables the shade effect which appears when the icon is pressed and released.


convertLabelToNumberSpinner

{chainable}

icon:convertLabelToNumberSpinner(numberSpinner)
Takes a NumberSpinner object (by boatbomber) and converts it into the icons label.

Example usage:

Icon.new()
    :setName("CashSpinnerIcon")
    :setRight()
    :lock()
    :setSize(100, 32)
    :give(function(icon)
        local NumberSpinner = require(replicatedStorage.NumberSpinner)
        local labelSpinner = NumberSpinner.new()
        icon:convertLabelToNumberSpinner(labelSpinner)
        labelSpinner.Name = "LabelSpinner"
        labelSpinner.Decimals = 3
        labelSpinner.Duration = 0.25
        coroutine.wrap(function()
            while wait(0.5) do
                labelSpinner.Value = math.random(100000)/1000
            end
        end)()
    end)

setImage

{chainable} {toggleable}

icon:setImage(imageId, iconState)
Applies an image to the icon based on the given imaageId. imageId can be an assetId or a complete asset string.


setLabel

{chainable} {toggleable}

icon:setLabel(text, iconState)


setOrder

{chainable} {toggleable}

icon:setOrder(order, iconState)


setCornerRadius

{chainable} {toggleable}

icon:setCornerRadius(scale, offset, iconState)


setLeft

{chainable} {toggleable}

icon:setLeft(iconState)


setMid

{chainable} {toggleable}

icon:setMid(iconState)


setRight

{chainable} {toggleable}

icon:setRight(iconState)


setImageYScale

{chainable} {toggleable}

icon:setImageYScale(YScale, iconState)
Defines the proportional space the icons image takes up within the icons container.


setImageRatio

{chainable} {toggleable}

icon:setImageRatio(ratio, iconState)
Defines the x:y ratio dimensions as a number. By default ratio is 1.00.


setLabelYScale

{chainable} {toggleable}

icon:setLabelYScale(YScale, iconState)
Defines how large label text appears.By default YScale is 0.45.


setBaseZIndex

{chainable} {toggleable}

icon:setBaseZIndex(ZIndex, iconState)
Calculates the difference between the existing baseZIndex (i.e. instances.iconContainer.ZIndex) and new value, then updates the ZIndex of all objects within the icon accoridngly using this difference.


setSize

{chainable} {toggleable}

icon:setSize(XOffset, YOffset, iconState)
Determines the icons container size. By default XOffset and YOffset are 32.


bindToggleItem

{chainable}

icon:bindToggleItem(guiObjectOrLayerCollector)
Binds a GuiObject or LayerCollector to appear and disappeared when the icon is toggled.


unbindToggleItem

{chainable}

icon:unbindToggleItem(guiObjectOrLayerCollector)
Unbinds the given GuiObject or LayerCollector from the toggle.


bindEvent

{chainable}

icon:bindEvent(iconEventName, eventFunction)
Connects to an icon event based upon the given iconEventName and call eventFunction with arguments (self, ...) when the event is triggered.


unbindEvent

{chainable}

icon:unbindEvent(iconEventName)
Unbinds the connection of the associated iconEventName.


bindToggleKey

{chainable}

icon:bindToggleKey(keyCodeEnum)
Binds a keycode which toggles the icon when pressed.


unbindToggleKey

{chainable}

icon:unbindToggleKey(keyCodeEnum)
Unbinds the given keycode.


give

{chainable}

icon:give(userdata)
Passes the given userdata to the Icons maid to be destroyed/disconnected on the icons destruction. If a function is passed, it will be executed right away with its self (the icon) being passed as the first argument. The return value is then given to the maid (instead of the function).


lock

{chainable}

icon:lock()
Prevents the icon from being pressed and toggled.


unlock

{chainable}

icon:unlock()
Enables the icon to be pressed and toggled.


setTopPadding

{chainable}

icon:setTopPadding(offset, scale)
The gap between the top of the screen and the icon.


setTip

{chainable}

icon:setTip(text)
Sets a tip. To remove, pass nil as text.


setCaption

{chainable}

icon:setCaption(text)
Sets a caption. To remove, pass nil as text.


join

{chainable}

icon:join(parentIcon, featureName)
Parents the icon to the given parentIcon under the specified feature, either "dropdown" or "menu".


leave

{chainable}

icon:leave()
Unparents an icon from a parentIcon if it belongs to a dropdown or menu.


setDropdown

{chainable}

icon:setDropdown(arrayOfIcons)
Creates a vertical dropdown based upon the given table array of icons. Pass an empty table {} to remove the dropdown. Dropdown settings can be configured using themes or the set method.


setMenu

{chainable}

icon:setMenu(arrayOfIcons)
Creates a horizontal menu based upon the given table array of icons. Pass an empty table {} to remove the menu. Menu settings can be configured using themes or the set method.


destroy

{chainable}

icon:destroy()
Clears all connections and destroys all instances associated with the icon.


Events

selected

icon.selected:Connect(function()
    print("The icon was selected")
end)

deselected

icon.deselected:Connect(function()
    print("The icon was deselected")
end)

toggled

icon.toggled:Connect(function(isSelected)
    print(("The icon was %s"):format(icon:getToggleState(isSelected)))
end)

hoverStarted

icon.hoverStarted:Connect(function()
    print("A mouse, finger or controller selection is hovering over the icon")
end)

hoverEnded

icon.hoverEnded:Connect(function()
    print("The item is no longer hovering over the icon")
end)

icon.dropdownOpened:Connect(function()
    print("The dropdown was opened")
end)

icon.dropdownClosed:Connect(function()
    print("The dropdown was closed")
end)

icon.menuOpened:Connect(function()
    print("The menu was opened")
end)

icon.menuClosed:Connect(function()
    print("The menu was closed")
end)

notified

icon.notified:Connect(function()
    print("New notice")
end)

Properties

deselectWhenOtherIconSelected

local bool = icon.deselectWhenOtherIconSelected --[default: 'true']
A bool deciding whether the icon will be deselected when another icon is selected. Defaults to true.


accountForWhenDisabled

local bool = icon.accountForWhenDisabled --[default: 'false']
A bool deciding whether to continue accounting for and updating the icons position on the topbar when disabled


name

{read-only}

local string = icon.name --[default: '"Unnamed Icon"']


isSelected

{read-only}

local bool = icon.isSelected


enabled

{read-only}

local bool = icon.enabled


hovering

{read-only}

local bool = icon.hovering


tipText

{read-only}

local stringOrNil = icon.tipText


captionText

{read-only}

local stringOrNil = icon.captionText


totalNotices

{read-only}

local int = icon.totalNotices


{read-only}

local arrayOfIcons = icon.dropdownIcons


{read-only}

local arrayOfIcons = icon.menuIcons


{read-only}

local bool = icon.dropdownOpen


{read-only}

local bool = icon.menuOpen


locked

{read-only}

local bool = icon.locked


topPadding

{read-only}

local udim = icon.topPadding


targetPosition

{read-only}

local udim2 = icon.targetPosition
The position the icon is at or aims to move to.