Getting Started

Visit the Add-On Developer Guide to learn more on how to use the Panel icons.

Visit the Docs to learn more about our system requirements.

What is Scayle ?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about Scayles’s architecture and commerce modules in the Docs.

Installation

npm i -S @scayle/panel-icons

Usage

The icons/ directory contains all the icon files as svg. Do what you want with them.

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

• 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
• Edit icon graphic has been updated
• 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

Icon Components

It's possible to automatically convert the icons into components using unplugin-icons. An example using Vue 3 and webpack can be seen in the demo-add-on. The plugin is also compatible with other frameworks and build tools.

vite.config.ts

import fs from 'fs';
import path from 'path';
import IconsPlugin from 'unplugin-icons/vite';

function generatePanelIcons() {
    const dir = path.join(path.dirname(require.resolve('@scayle/panel-icons')), 'icons');
    let icons: Record<string, string> = {};

    fs.readdirSync(dir).forEach(function (file: string) {
        const simpleName = file.replace('.svg', '');
        icons[simpleName] = fs.readFileSync(path.join(dir, file)).toString('utf8');
    });

    return icons;
}

/* ... */
{
    plugins: [
        /* ... */
        IconsPlugin({
            compiler: 'vue3',
            defaultClass: 'icon',
            customCollections: {
                panel: generatePanelIcons()
            }
        }),
    ]
}

Then inside the Vue single-file components, import and use the icon component.

<script lang="ts" setup>
import IconClose from '~icons/panel/close';
</script>

If you're using TypeScript, make sure to add "unplugin-icons/types/vue" to the types in your tsconfig.json.

It can also be combined with unplugin-vue-components to avoid the import step.

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" /> | | arrow-bottom-right | | ./icons/arrow-bottom-right.svg | <IconArrowBottomRight class="icon" /> | | arrow-circle-down | | ./icons/arrow-circle-down.svg | <IconArrowCircleDown class="icon" /> | | arrow-circle-left | | ./icons/arrow-circle-left.svg | <IconArrowCircleLeft class="icon" /> | | arrow-circle-right | | ./icons/arrow-circle-right.svg | <IconArrowCircleRight class="icon" /> | | arrow-circle-up | | ./icons/arrow-circle-up.svg | <IconArrowCircleUp class="icon" /> | | arrow-down | | ./icons/arrow-down.svg | <IconArrowDown class="icon" /> | | arrow-left | | ./icons/arrow-left.svg | <IconArrowLeft class="icon" /> | | arrow-left-right | | ./icons/arrow-left-right.svg | <IconArrowLeftRight class="icon" /> | | arrow-right | | ./icons/arrow-right.svg | <IconArrowRight class="icon" /> | | arrow-up | | ./icons/arrow-up.svg | <IconArrowUp class="icon" /> | | attach | | ./icons/attach.svg | <IconAttach class="icon" /> | | ban | | ./icons/ban.svg | <IconBan class="icon" /> | | bars | | ./icons/bars.svg | <IconBars class="icon" /> | | basket | | ./icons/basket.svg | <IconBasket class="icon" /> | | bell | | ./icons/bell.svg | <IconBell class="icon" /> | | bell-add | | ./icons/bell-add.svg | <IconBellAdd class="icon" /> | | bell-disabled | | ./icons/bell-disabled.svg | <IconBellDisabled class="icon" /> | | book-open | | ./icons/book-open.svg | <IconBookOpen class="icon" /> | | bookmark | | ./icons/bookmark.svg | <IconBookmark class="icon" /> | | bookmark-fill | | ./icons/bookmark-fill.svg | <IconBookmarkFill class="icon" /> | | bookmark-off | | ./icons/bookmark-off.svg | <IconBookmarkOff class="icon" /> | | box-search | | ./icons/box-search.svg | <IconBoxSearch class="icon" /> | | box-success | | ./icons/box-success.svg | <IconBoxSuccess class="icon" /> | | calendar | | ./icons/calendar.svg | <IconCalendar class="icon" /> | | calendar-in | | ./icons/calendar-in.svg | <IconCalendarIn class="icon" /> | | calendar-out | | ./icons/calendar-out.svg | <IconCalendarOut class="icon" /> | | carrier | | ./icons/carrier.svg | <IconCarrier class="icon" /> | | channel | | ./icons/channel.svg | <IconChannel class="icon" /> | | chat-bubbles | | ./icons/chat-bubbles.svg | <IconChatBubbles class="icon" /> | | checkmark | | ./icons/checkmark.svg | <IconCheckmark class="icon" /> | | checkout-settings | | ./icons/checkout-settings.svg | <IconCheckoutSettings class="icon" /> | | chevron-double-down | | ./icons/chevron-double-down.svg | <IconChevronDoubleDown class="icon" /> | | chevron-double-left | | ./icons/chevron-double-left.svg | <IconChevronDoubleLeft class="icon" /> | | chevron-double-right | | ./icons/chevron-double-right.svg | <IconChevronDoubleRight class="icon" /> | | chevron-double-up | | ./icons/chevron-double-up.svg | <IconChevronDoubleUp class="icon" /> | | chevron-down | | ./icons/chevron-down.svg | <IconChevronDown class="icon" /> | | chevron-left | | ./icons/chevron-left.svg | <IconChevronLeft class="icon" /> | | chevron-right | | ./icons/chevron-right.svg | <IconChevronRight class="icon" /> | | chevron-up | | ./icons/chevron-up.svg | <IconChevronUp class="icon" /> | | chevron-up-down | | ./icons/chevron-up-down.svg | <IconChevronUpDown class="icon" /> | | chevron-up-down-table | | ./icons/chevron-up-down-table.svg | <IconChevronUpDownTable class="icon" /> | | close | | ./icons/close.svg | <IconClose class="icon" /> | | cloud | | ./icons/cloud.svg | <IconCloud class="icon" /> | | coffee | | ./icons/coffee.svg | <IconCoffee class="icon" /> | | connection-multi | | ./icons/connection-multi.svg | <IconConnectionMulti class="icon" /> | | convert | | ./icons/convert.svg | <IconConvert class="icon" /> | | copy | | ./icons/copy.svg | <IconCopy class="icon" /> | | crown | | ./icons/crown.svg | <IconCrown class="icon" /> | | dashboard | | ./icons/dashboard.svg | <IconDashboard class="icon" /> | | data-table | | ./icons/data-table.svg | <IconDataTable class="icon" /> | | device-desktop | | ./icons/device-desktop.svg | <IconDeviceDesktop class="icon" /> | | device-mobile | | ./icons/device-mobile.svg | <IconDeviceMobile class="icon" /> | | discount | | ./icons/discount.svg | <IconDiscount class="icon" /> | | dollar-note | | ./icons/dollar-note.svg | <IconDollarNote class="icon" /> | | download | | ./icons/download.svg | <IconDownload class="icon" /> | | drag | | ./icons/drag.svg | <IconDrag class="icon" /> | | edit | | ./icons/edit.svg | <IconEdit class="icon" /> | | education | | ./icons/education.svg | <IconEducation class="icon" /> | | email | | ./icons/email.svg | <IconEmail class="icon" /> | | error | | ./icons/error.svg | <IconError class="icon" /> | | error-fill | | ./icons/error-fill.svg | <IconErrorFill class="icon" /> | | expand | | ./icons/expand.svg | <IconExpand class="icon" /> | | external | | ./icons/external.svg | <IconExternal class="icon" /> | | eye | | ./icons/eye.svg | <IconEye class="icon" /> | | eye-striked | | ./icons/eye-striked.svg | <IconEyeStriked class="icon" /> | | file-csv | | ./icons/file-csv.svg | <IconFileCsv class="icon" /> | | file-pdf | | ./icons/file-pdf.svg | <IconFilePdf class="icon" /> | | file-return-docs | | ./icons/file-return-docs.svg | <IconFileReturnDocs class="icon" /> | | file-text | | ./icons/file-text.svg | <IconFileText class="icon" /> | | file-xls | | ./icons/file-xls.svg | <IconFileXls class="icon" /> | | filter | | ./icons/filter.svg | <IconFilter class="icon" /> | | flag | | ./icons/flag.svg | <IconFlag class="icon" /> | | folder | | ./icons/folder.svg | <IconFolder class="icon" /> | | folder-fill | | ./icons/folder-fill.svg | <IconFolderFill class="icon" /> | | folder-open-fill | | ./icons/folder-open-fill.svg | <IconFolderOpenFill class="icon" /> | | forbidden-return-documents | | ./icons/forbidden-return-documents.svg | <IconForbiddenReturnDocuments class="icon" /> | | forward | | ./icons/forward.svg | <IconForward class="icon" /> | | gift | | ./icons/gift.svg | <IconGift class="icon" /> | | globe | | ./icons/globe.svg | <IconGlobe class="icon" /> | | globe-checkmark | | ./icons/globe-checkmark.svg | <IconGlobeCheckmark class="icon" /> | | half | | ./icons/half.svg | <IconHalf class="icon" /> | | headset | | ./icons/headset.svg | <IconHeadset class="icon" /> | | heart | | ./icons/heart.svg | <IconHeart class="icon" /> | | heart-fill | | ./icons/heart-fill.svg | <IconHeartFill class="icon" /> | | id | | ./icons/id.svg | <IconId class="icon" /> | | image-single | | ./icons/image-single.svg | <IconImageSingle class="icon" /> | | image-stacked | | ./icons/image-stacked.svg | <IconImageStacked class="icon" /> | | import | | ./icons/import.svg | <IconImport class="icon" /> | | info | | ./icons/info.svg | <IconInfo class="icon" /> | | info-fill | | ./icons/info-fill.svg | <IconInfoFill class="icon" /> | | invoice | | ./icons/invoice.svg | <IconInvoice class="icon" /> | | key | | ./icons/key.svg | <IconKey class="icon" /> | | key-framed | | ./icons/key-framed.svg | <IconKeyFramed class="icon" /> | | layout | | ./icons/layout.svg | <IconLayout class="icon" /> | | link | | ./icons/link.svg | <IconLink class="icon" /> | | link-disconnect | | ./icons/link-disconnect.svg | <IconLinkDisconnect class="icon" /> | | list-attributes | | ./icons/list-attributes.svg | <IconListAttributes class="icon" /> | | list-view | | ./icons/list-view.svg | <IconListView class="icon" /> | | location | | ./icons/location.svg | <IconLocation class="icon" /> | | lock | | ./icons/lock.svg | <IconLock class="icon" /> | | lock-open | | ./icons/lock-open.svg | <IconLockOpen class="icon" /> | | logic | | ./icons/logic.svg | <IconLogic class="icon" /> | | logistics-box-trolley | | ./icons/logistics-box-trolley.svg | <IconLogisticsBoxTrolley class="icon" /> | | logistics-boxes-crane | | ./icons/logistics-boxes-crane.svg | <IconLogisticsBoxesCrane class="icon" /> | | loudspeaker | | ./icons/loudspeaker.svg | <IconLoudspeaker class="icon" /> | | loyalty | | ./icons/loyalty.svg | <IconLoyalty class="icon" /> | | luxury | | ./icons/luxury.svg | <IconLuxury class="icon" /> | | magic-wand | | ./icons/magic-wand.svg | <IconMagicWand class="icon" /> | | menu | | ./icons/menu.svg | <IconMenu class="icon" /> | | minus | | ./icons/minus.svg | <IconMinus class="icon" /> | | money | | ./icons/money.svg | <IconMoney class="icon" /> | | more | | ./icons/more.svg | <IconMore class="icon" /> | | more-horizontal | | ./icons/more-horizontal.svg | <IconMoreHorizontal class="icon" /> | | nested-list-view | | ./icons/nested-list-view.svg | <IconNestedListView class="icon" /> | | notes | | ./icons/notes.svg | <IconNotes class="icon" /> | | off | | ./icons/off.svg | <IconOff class="icon" /> | | office | | ./icons/office.svg | <IconOffice class="icon" /> | | order-e | | ./icons/order-e.svg | <IconOrderE class="icon" /> | | ordered-list | | ./icons/ordered-list.svg | <IconOrderedList class="icon" /> | | outfit | | ./icons/outfit.svg | <IconOutfit class="icon" /> | | page | | ./icons/page.svg | <IconPage class="icon" /> | | parcel | | ./icons/parcel.svg | <IconParcel class="icon" /> | | parcel-down | | ./icons/parcel-down.svg | <IconParcelDown class="icon" /> | | parcel-search | | ./icons/parcel-search.svg | <IconParcelSearch class="icon" /> | | paste | | ./icons/paste.svg | <IconPaste class="icon" /> | | pay | | ./icons/pay.svg | <IconPay class="icon" /> | | percentage | | ./icons/percentage.svg | <IconPercentage class="icon" /> | | percentage-circle | | ./icons/percentage-circle.svg | <IconPercentageCircle class="icon" /> | | phone | | ./icons/phone.svg | <IconPhone class="icon" /> | | placeholder | | ./icons/placeholder.svg | <IconPlaceholder class="icon" /> | | player-pause | | ./icons/player-pause.svg | <IconPlayerPause class="icon" /> | | player-play | | ./icons/player-play.svg | <IconPlayerPlay class="icon" /> | | polaroid | | ./icons/polaroid.svg | <IconPolaroid class="icon" /> | | product-import | | ./icons/product-import.svg | <IconProductImport class="icon" /> | | question | | ./icons/question.svg | <IconQuestion class="icon" /> | | question-fill | | ./icons/question-fill.svg | <IconQuestionFill class="icon" /> | | question-filled | | ./icons/question-filled.svg | <IconQuestionFilled class="icon" /> | | refresh | | ./icons/refresh.svg | <IconRefresh class="icon" /> | | restore | | ./icons/restore.svg | <IconRestore class="icon" /> | | rule-engine | | ./icons/rule-engine.svg | <IconRuleEngine class="icon" /> | | save | | ./icons/save.svg | <IconSave class="icon" /> | | scan | | ./icons/scan.svg | <IconScan class="icon" /> | | search | | ./icons/search.svg | <IconSearch class="icon" /> | | send | | ./icons/send.svg | <IconSend class="icon" /> | | seo | | ./icons/seo.svg | <IconSeo class="icon" /> | | separate | | ./icons/separate.svg | <IconSeparate class="icon" /> | | server | | ./icons/server.svg | <IconServer class="icon" /> | | settings | | ./icons/settings.svg | <IconSettings class="icon" /> | | settings-wheel | | ./icons/settings-wheel.svg | <IconSettingsWheel class="icon" /> | | share | | ./icons/share.svg | <IconShare class="icon" /> | | shirt | | ./icons/shirt.svg | <IconShirt class="icon" /> | | shirt-success | | ./icons/shirt-success.svg | <IconShirtSuccess class="icon" /> | | shrink | | ./icons/shrink.svg | <IconShrink class="icon" /> | | smiley-average | | ./icons/smiley-average.svg | <IconSmileyAverage class="icon" /> | | smiley-bad | | ./icons/smiley-bad.svg | <IconSmileyBad class="icon" /> | | smiley-good | | ./icons/smiley-good.svg | <IconSmileyGood class="icon" /> | | social-facebook | | ./icons/social-facebook.svg | <IconSocialFacebook class="icon" /> | | social-twitter | | ./icons/social-twitter.svg | <IconSocialTwitter class="icon" /> | | sort-bottom-to-top | | ./icons/sort-bottom-to-top.svg | <IconSortBottomToTop class="icon" /> | | sort-top-to-bottom | | ./icons/sort-top-to-bottom.svg | <IconSortTopToBottom class="icon" /> | | sparkle | | ./icons/sparkle.svg | <IconSparkle class="icon" /> | | spelling-mistake | | ./icons/spelling-mistake.svg | <IconSpellingMistake class="icon" /> | | stack | | ./icons/stack.svg | <IconStack class="icon" /> | | star | | ./icons/star.svg | <IconStar class="icon" /> | | star-fill | | ./icons/star-fill.svg | <IconStarFill class="icon" /> | | stopwatch | | ./icons/stopwatch.svg | <IconStopwatch class="icon" /> | | store | | ./icons/store.svg | <IconStore class="icon" /> | | store-location | | ./icons/store-location.svg | <IconStoreLocation class="icon" /> | | structure | | ./icons/structure.svg | <IconStructure class="icon" /> | | structure-horizontal | | ./icons/structure-horizontal.svg | <IconStructureHorizontal class="icon" /> | | structure-vertical | | ./icons/structure-vertical.svg | <IconStructureVertical class="icon" /> | | success | | ./icons/success.svg | <IconSuccess class="icon" /> | | success-fill | | ./icons/success-fill.svg | <IconSuccessFill class="icon" /> | | sust-cotton | | ./icons/sust-cotton.svg | <IconSustCotton class="icon" /> | | swap-horizontal | | ./icons/swap-horizontal.svg | <IconSwapHorizontal class="icon" /> | | swap-vertical | | ./icons/swap-vertical.svg | <IconSwapVertical class="icon" /> | | tablet | | ./icons/tablet.svg | <IconTablet class="icon" /> | | tag | | ./icons/tag.svg | <IconTag class="icon" /> | | task | | ./icons/task.svg | <IconTask class="icon" /> | | tax | | ./icons/tax.svg | <IconTax class="icon" /> | | technology | | ./icons/technology.svg | <IconTechnology class="icon" /> | | text | | ./icons/text.svg | <IconText class="icon" /> | | text-bold | | ./icons/text-bold.svg | <IconTextBold class="icon" /> | | text-center | | ./icons/text-center.svg | <IconTextCenter class="icon" /> | | text-italic | | ./icons/text-italic.svg | <IconTextItalic class="icon" /> | | text-justify | | ./icons/text-justify.svg | <IconTextJustify class="icon" /> | | text-left | | ./icons/text-left.svg | <IconTextLeft class="icon" /> | | text-paragraph | | ./icons/text-paragraph.svg | <IconTextParagraph class="icon" /> | | text-right | | ./icons/text-right.svg | <IconTextRight class="icon" /> | | text-underline | | ./icons/text-underline.svg | <IconTextUnderline class="icon" /> | | tile-view | | ./icons/tile-view.svg | <IconTileView class="icon" /> | | translate | | ./icons/translate.svg | <IconTranslate class="icon" /> | | trash | | ./icons/trash.svg | <IconTrash class="icon" /> | | triangle-right | | ./icons/triangle-right.svg | <IconTriangleRight class="icon" /> | | truck | | ./icons/truck.svg | <IconTruck class="icon" /> | | two-fa-restore | | ./icons/two-fa-restore.svg | <IconTwoFaRestore class="icon" /> | | ufo | | ./icons/ufo.svg | <IconUfo class="icon" /> | | undo | | ./icons/undo.svg | <IconUndo class="icon" /> | | user | | ./icons/user.svg | <IconUser class="icon" /> | | user-key | | ./icons/user-key.svg | <IconUserKey class="icon" /> | | user-merchant | | ./icons/user-merchant.svg | <IconUserMerchant class="icon" /> | | user-permissions | | ./icons/user-permissions.svg | <IconUserPermissions class="icon" /> | | users | | ./icons/users.svg | <IconUsers class="icon" /> | | users-exchange | | ./icons/users-exchange.svg | <IconUsersExchange class="icon" /> | | voucher | | ./icons/voucher.svg | <IconVoucher class="icon" /> | | warehouse | | ./icons/warehouse.svg | <IconWarehouse class="icon" /> | | warning | | ./icons/warning.svg | <IconWarning class="icon" /> | | warning-circle | | ./icons/warning-circle.svg | <IconWarningCircle class="icon" /> | | warning-circle-fill | | ./icons/warning-circle-fill.svg | <IconWarningCircleFill class="icon" /> | | warning-fill | | ./icons/warning-fill.svg | <IconWarningFill class="icon" /> | | webhook | | ./icons/webhook.svg | <IconWebhook class="icon" /> | | world | | ./icons/world.svg | <IconWorld class="icon" /> |

Other channels

• LinkedIn
• Jobs
• SCAYLE

License

Licensed under the MIT