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

Name	Icon	Filename	Vue
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

Icon	Old icon name	New icon name
	2fa-restore	two-fa-restore
	key-2	key-framed
	logistics-1	logistics-boxes-crane
	logistics-2	logistics-box-trolley
	arrow-down	chevron-down
	arrow-left	chevron-left
	arrow-up	chevron-up
	arrow-right	chevron-right
	arrow-down-double	chevron-double-down
	arrow-left-double	chevron-double-left
	arrow-up-double	chevron-double-up
	arrow-right-double	chevron-double-right
	arrow-up-down-table	chevron-up-down-table
	arrow-up-down	chevron-up-down

New Icons in version 2.0

Icon	Icon name	Icon	Icon name
	arrow-down		box-search
	arrow-left		box-success
	arrow-up		sparkle
	arrow-right		bookmark
	warning-circle		bookmark-off
	warning-circle-fill		bookmark-fill
	checkout-settings		placeholder
	ordered-list		magic-wand
	smiley-good		user-key
	smiley-average		discount
	smiley-bad		luxury
	outfit		sort-bottom-to-top
	store-location		sort-top-to-bottom
	office