docs
  1. SCAYLE Resource Center
  2. Add-on Guide
  3. Getting Started
  4. Panel Icons Library

Panel Icons Library

The SCAYLE Panel Icons Library includes a vast number of icons that are used by the SCAYLE Panel to give Add-ons the same look and feel.

Additionally, this package explains how to create Vue3 Icon components (see README.md file)

Example icons

NameIconFilenameVue
activity./icons/activity.svg<IconActivity class="icon" />
add./icons/add.svg<IconAdd class="icon" />
analytics./icons/analytics.svg<IconAnalytics class="icon" />

Upgrade guide from version 1.4.2 to 2.0

To upgrade your panel-icons library, change the version for @scayle/panel-icons to "^2.0.0"

  • Icon prefix ic- has been removed for all icon names
  • 14 Icons have been renamed, see list below!
  • 27 new Icons have been added, see list below
  • The edit icon graphic has been updated slightly
  • All Icon files have been moved from img folder to icons folder
  • Updated generatePanelIcons method in your vite.config.ts (see README.md file)

Changed icon names in Version 2.0.0

IconOld icon nameNew icon name
2fa-restoretwo-fa-restore
key-2key-framed
logistics-1logistics-boxes-crane
logistics-2logistics-box-trolley
arrow-downchevron-down
arrow-leftchevron-left
arrow-upchevron-up
arrow-rightchevron-right
arrow-down-doublechevron-double-down
arrow-left-doublechevron-double-left
arrow-up-doublechevron-double-up
arrow-right-doublechevron-double-right
arrow-up-down-tablechevron-up-down-table
arrow-up-downchevron-up-down

New Icons in version 2.0.0

IconIcon nameIconIcon name
arrow-downbox-search
arrow-leftbox-success
arrow-upsparkle
arrow-rightbookmark
warning-circlebookmark-off
warning-circle-fillbookmark-fill
checkout-settingsplaceholder
ordered-listmagic-wand
smiley-gooduser-key
smiley-averagediscount
smiley-badluxury
outfitsort-bottom-to-top
store-locationsort-top-to-bottom
office

New Icons in version 2.1.0

IconIcon nameIconIcon name
arrow-circle-filled-downmail-error
arrow-circle-filled-leftpackage
arrow-circle-filled-rightshirt-new
arrow-circle-filled-upsparkle-fill
calendar-timetarget
certificateuser-add
chart-barsuser-edit
contact-badgeuser-remove
contract

New Icon in version 2.2.0

IconIcon nameIconIcon name
shirt-download