@scayle/panel-icons v1.2.1

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 img/ directory contains all the icon files as svg. Do what you want with them.

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.

webpack.config.ts

const fs = require('fs');
const path = require('path');
const IconsPlugin = require('unplugin-icons/webpack');

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

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

    return icons;
}

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

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

import IconClose from '~icons/panel/close';

export default {
  name: "MyComponent",
  components: {
    IconClose,
  }
}

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.

webpack.config.ts

const IconsResolver = require('unplugin-icons/resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

/* ... */
{
    plugins: [
        /* ... */
        IconsPlugin({
            compiler: 'vue3',
            prefix: 'icon',
            defaultClass: 'icon',
            customCollections: {
                panel: generatePanelIcons()
            }
        }),
        ComponentsPlugin({
            dts: true,
            resolvers: [
                IconsResolver({
                    prefix: '',
                    alias: {
                        icon: 'panel',
                    },
                    customCollections: [
                        'panel',
                    ]
                })
            ],
        }),
    ]
}

Then the icons can be used like <IconClose /> directly in Vue templates without manually importing the component.

Icons

Name	Icon	Filename	Vue
2fa-restore		./img/ic-2fa-restore.svg	<Icon2faRestore class="icon" />
activity		./img/ic-activity.svg	<IconActivity class="icon" />
add		./img/ic-add.svg	<IconAdd class="icon" />
analytics		./img/ic-analytics.svg	<IconAnalytics class="icon" />
arrow-bottom-right		./img/ic-arrow-bottom-right.svg	<IconArrowBottomRight class="icon" />
arrow-circle-down		./img/ic-arrow-circle-down.svg	<IconArrowCircleDown class="icon" />
arrow-circle-left		./img/ic-arrow-circle-left.svg	<IconArrowCircleLeft class="icon" />
arrow-circle-right		./img/ic-arrow-circle-right.svg	<IconArrowCircleRight class="icon" />
arrow-circle-up		./img/ic-arrow-circle-up.svg	<IconArrowCircleUp class="icon" />
arrow-down-double		./img/ic-arrow-down-double.svg	<IconArrowDownDouble class="icon" />
arrow-down		./img/ic-arrow-down.svg	<IconArrowDown class="icon" />
arrow-left-double		./img/ic-arrow-left-double.svg	<IconArrowLeftDouble class="icon" />
arrow-left-right		./img/ic-arrow-left-right.svg	<IconArrowLeftRight class="icon" />
arrow-left		./img/ic-arrow-left.svg	<IconArrowLeft class="icon" />
arrow-right-double		./img/ic-arrow-right-double.svg	<IconArrowRightDouble class="icon" />
arrow-right		./img/ic-arrow-right.svg	<IconArrowRight class="icon" />
arrow-up-double		./img/ic-arrow-up-double.svg	<IconArrowUpDouble class="icon" />
arrow-up-down-table		./img/ic-arrow-up-down-table.svg	<IconArrowUpDownTable class="icon" />
arrow-up-down		./img/ic-arrow-up-down.svg	<IconArrowUpDown class="icon" />
arrow-up		./img/ic-arrow-up.svg	<IconArrowUp class="icon" />
attach		./img/ic-attach.svg	<IconAttach class="icon" />
ban		./img/ic-ban.svg	<IconBan class="icon" />
bars		./img/ic-bars.svg	<IconBars class="icon" />
basket		./img/ic-basket.svg	<IconBasket class="icon" />
bell		./img/ic-bell.svg	<IconBell class="icon" />
book-open		./img/ic-book-open.svg	<IconBookOpen class="icon" />
calendar-in		./img/ic-calendar-in.svg	<IconCalendarIn class="icon" />
calendar-out		./img/ic-calendar-out.svg	<IconCalendarOut class="icon" />
calendar		./img/ic-calendar.svg	<IconCalendar class="icon" />
carrier		./img/ic-carrier.svg	<IconCarrier class="icon" />
channel		./img/ic-channel.svg	<IconChannel class="icon" />
chat-bubbles		./img/ic-chat-bubbles.svg	<IconChatBubbles class="icon" />
checkmark		./img/ic-checkmark.svg	<IconCheckmark class="icon" />
close		./img/ic-close.svg	<IconClose class="icon" />
cloud		./img/ic-cloud.svg	<IconCloud class="icon" />
coffee		./img/ic-coffee.svg	<IconCoffee class="icon" />
connection-multi		./img/ic-connection-multi.svg	<IconConnectionMulti class="icon" />
convert		./img/ic-convert.svg	<IconConvert class="icon" />
copy		./img/ic-copy.svg	<IconCopy class="icon" />
crown		./img/ic-crown.svg	<IconCrown class="icon" />
dashboard		./img/ic-dashboard.svg	<IconDashboard class="icon" />
data-table		./img/ic-data-table.svg	<IconDataTable class="icon" />
device-desktop		./img/ic-device-desktop.svg	<IconDeviceDesktop class="icon" />
device-mobile		./img/ic-device-mobile.svg	<IconDeviceMobile class="icon" />
dollar-note		./img/ic-dollar-note.svg	<IconDollarNote class="icon" />
download		./img/ic-download.svg	<IconDownload class="icon" />
drag		./img/ic-drag.svg	<IconDrag class="icon" />
edit		./img/ic-edit.svg	<IconEdit class="icon" />
education		./img/ic-education.svg	<IconEducation class="icon" />
email		./img/ic-email.svg	<IconEmail class="icon" />
error-fill		./img/ic-error-fill.svg	<IconErrorFill class="icon" />
error		./img/ic-error.svg	<IconError class="icon" />
expand		./img/ic-expand.svg	<IconExpand class="icon" />
external		./img/ic-external.svg	<IconExternal class="icon" />
eye-striked		./img/ic-eye-striked.svg	<IconEyeStriked class="icon" />
eye		./img/ic-eye.svg	<IconEye class="icon" />
file-csv		./img/ic-file-csv.svg	<IconFileCsv class="icon" />
file-pdf		./img/ic-file-pdf.svg	<IconFilePdf class="icon" />
file-return-docs		./img/ic-file-return-docs.svg	<IconFileReturnDocs class="icon" />
file-text		./img/ic-file-text.svg	<IconFileText class="icon" />
file-xls		./img/ic-file-xls.svg	<IconFileXls class="icon" />
filter		./img/ic-filter.svg	<IconFilter class="icon" />
flag		./img/ic-flag.svg	<IconFlag class="icon" />
folder-fill		./img/ic-folder-fill.svg	<IconFolderFill class="icon" />
folder-open-fill		./img/ic-folder-open-fill.svg	<IconFolderOpenFill class="icon" />
folder		./img/ic-folder.svg	<IconFolder class="icon" />
forbidden-return-documents		./img/ic-forbidden-return-documents.svg	<IconForbiddenReturnDocuments class="icon" />
forward		./img/ic-forward.svg	<IconForward class="icon" />
gift		./img/ic-gift.svg	<IconGift class="icon" />
globe-checkmark		./img/ic-globe-checkmark.svg	<IconGlobeCheckmark class="icon" />
globe		./img/ic-globe.svg	<IconGlobe class="icon" />
half		./img/ic-half.svg	<IconHalf class="icon" />
headset		./img/ic-headset.svg	<IconHeadset class="icon" />
heart-fill		./img/ic-heart-fill.svg	<IconHeartFill class="icon" />
heart		./img/ic-heart.svg	<IconHeart class="icon" />
id		./img/ic-id.svg	<IconId class="icon" />
image-single		./img/ic-image-single.svg	<IconImageSingle class="icon" />
image-stacked		./img/ic-image-stacked.svg	<IconImageStacked class="icon" />
import		./img/ic-import.svg	<IconImport class="icon" />
info-fill		./img/ic-info-fill.svg	<IconInfoFill class="icon" />
info		./img/ic-info.svg	<IconInfo class="icon" />
invoice		./img/ic-invoice.svg	<IconInvoice class="icon" />
key-2		./img/ic-key-2.svg	<IconKey2 class="icon" />
key		./img/ic-key.svg	<IconKey class="icon" />
layout		./img/ic-layout.svg	<IconLayout class="icon" />
link-disconnect		./img/ic-link-disconnect.svg	<IconLinkDisconnect class="icon" />
link		./img/ic-link.svg	<IconLink class="icon" />
list-attributes		./img/ic-list-attributes.svg	<IconListAttributes class="icon" />
list-view		./img/ic-list-view.svg	<IconListView class="icon" />
location		./img/ic-location.svg	<IconLocation class="icon" />
lock-open		./img/ic-lock-open.svg	<IconLockOpen class="icon" />
lock		./img/ic-lock.svg	<IconLock class="icon" />
logic		./img/ic-logic.svg	<IconLogic class="icon" />
logistics-1		./img/ic-logistics-1.svg	<IconLogistics1 class="icon" />
logistics-2		./img/ic-logistics-2.svg	<IconLogistics2 class="icon" />
loudspeaker		./img/ic-loudspeaker.svg	<IconLoudspeaker class="icon" />
loyalty		./img/ic-loyalty.svg	<IconLoyalty class="icon" />
menu		./img/ic-menu.svg	<IconMenu class="icon" />
minus		./img/ic-minus.svg	<IconMinus class="icon" />
money		./img/ic-money.svg	<IconMoney class="icon" />
more-horizontal		./img/ic-more-horizontal.svg	<IconMoreHorizontal class="icon" />
more		./img/ic-more.svg	<IconMore class="icon" />
nested-list-view		./img/ic-nested-list-view.svg	<IconNestedListView class="icon" />
notes		./img/ic-notes.svg	<IconNotes class="icon" />
off		./img/ic-off.svg	<IconOff class="icon" />
order-e		./img/ic-order-e.svg	<IconOrderE class="icon" />
page		./img/ic-page.svg	<IconPage class="icon" />
parcel-down		./img/ic-parcel-down.svg	<IconParcelDown class="icon" />
parcel-search		./img/ic-parcel-search.svg	<IconParcelSearch class="icon" />
parcel		./img/ic-parcel.svg	<IconParcel class="icon" />
paste		./img/ic-paste.svg	<IconPaste class="icon" />
pay		./img/ic-pay.svg	<IconPay class="icon" />
percentage-circle		./img/ic-percentage-circle.svg	<IconPercentageCircle class="icon" />
percentage		./img/ic-percentage.svg	<IconPercentage class="icon" />
phone		./img/ic-phone.svg	<IconPhone class="icon" />
player-pause		./img/ic-player-pause.svg	<IconPlayerPause class="icon" />
player-play		./img/ic-player-play.svg	<IconPlayerPlay class="icon" />
polaroid		./img/ic-polaroid.svg	<IconPolaroid class="icon" />
product-import		./img/ic-product-import.svg	<IconProductImport class="icon" />
question-fill		./img/ic-question-fill.svg	<IconQuestionFill class="icon" />
question-filled		./img/ic-question-filled.svg	<IconQuestionFilled class="icon" />
question		./img/ic-question.svg	<IconQuestion class="icon" />
refresh		./img/ic-refresh.svg	<IconRefresh class="icon" />
restore		./img/ic-restore.svg	<IconRestore class="icon" />
rule-engine		./img/ic-rule-engine.svg	<IconRuleEngine class="icon" />
save		./img/ic-save.svg	<IconSave class="icon" />
scan		./img/ic-scan.svg	<IconScan class="icon" />
search		./img/ic-search.svg	<IconSearch class="icon" />
send		./img/ic-send.svg	<IconSend class="icon" />
seo		./img/ic-seo.svg	<IconSeo class="icon" />
separate		./img/ic-separate.svg	<IconSeparate class="icon" />
server		./img/ic-server.svg	<IconServer class="icon" />
settings-wheel		./img/ic-settings-wheel.svg	<IconSettingsWheel class="icon" />
settings		./img/ic-settings.svg	<IconSettings class="icon" />
share		./img/ic-share.svg	<IconShare class="icon" />
shirt-success		./img/ic-shirt-success.svg	<IconShirtSuccess class="icon" />
shirt		./img/ic-shirt.svg	<IconShirt class="icon" />
shrink		./img/ic-shrink.svg	<IconShrink class="icon" />
social-facebook		./img/ic-social-facebook.svg	<IconSocialFacebook class="icon" />
social-twitter		./img/ic-social-twitter.svg	<IconSocialTwitter class="icon" />
spelling-mistake		./img/ic-spelling-mistake.svg	<IconSpellingMistake class="icon" />
stack		./img/ic-stack.svg	<IconStack class="icon" />
star-fill		./img/ic-star-fill.svg	<IconStarFill class="icon" />
star		./img/ic-star.svg	<IconStar class="icon" />
stopwatch		./img/ic-stopwatch.svg	<IconStopwatch class="icon" />
store		./img/ic-store.svg	<IconStore class="icon" />
structure-horizontal		./img/ic-structure-horizontal.svg	<IconStructureHorizontal class="icon" />
structure-vertical		./img/ic-structure-vertical.svg	<IconStructureVertical class="icon" />
structure		./img/ic-structure.svg	<IconStructure class="icon" />
success-fill		./img/ic-success-fill.svg	<IconSuccessFill class="icon" />
success		./img/ic-success.svg	<IconSuccess class="icon" />
sust-cotton		./img/ic-sust-cotton.svg	<IconSustCotton class="icon" />
swap-horizontal		./img/ic-swap-horizontal.svg	<IconSwapHorizontal class="icon" />
swap-vertical		./img/ic-swap-vertical.svg	<IconSwapVertical class="icon" />
tablet		./img/ic-tablet.svg	<IconTablet class="icon" />
tag		./img/ic-tag.svg	<IconTag class="icon" />
task		./img/ic-task.svg	<IconTask class="icon" />
tax		./img/ic-tax.svg	<IconTax class="icon" />
technology		./img/ic-technology.svg	<IconTechnology class="icon" />
text-bold		./img/ic-text-bold.svg	<IconTextBold class="icon" />
text-center		./img/ic-text-center.svg	<IconTextCenter class="icon" />
text-italic		./img/ic-text-italic.svg	<IconTextItalic class="icon" />
text-justify		./img/ic-text-justify.svg	<IconTextJustify class="icon" />
text-left		./img/ic-text-left.svg	<IconTextLeft class="icon" />
text-paragraph		./img/ic-text-paragraph.svg	<IconTextParagraph class="icon" />
text-right		./img/ic-text-right.svg	<IconTextRight class="icon" />
text-underline		./img/ic-text-underline.svg	<IconTextUnderline class="icon" />
text		./img/ic-text.svg	<IconText class="icon" />
tile-view		./img/ic-tile-view.svg	<IconTileView class="icon" />
translate		./img/ic-translate.svg	<IconTranslate class="icon" />
trash		./img/ic-trash.svg	<IconTrash class="icon" />
triangle-right		./img/ic-triangle-right.svg	<IconTriangleRight class="icon" />
truck		./img/ic-truck.svg	<IconTruck class="icon" />
ufo		./img/ic-ufo.svg	<IconUfo class="icon" />
undo		./img/ic-undo.svg	<IconUndo class="icon" />
user-merchant		./img/ic-user-merchant.svg	<IconUserMerchant class="icon" />
user-permissions		./img/ic-user-permissions.svg	<IconUserPermissions class="icon" />
user		./img/ic-user.svg	<IconUser class="icon" />
users-exchange		./img/ic-users-exchange.svg	<IconUsersExchange class="icon" />
users		./img/ic-users.svg	<IconUsers class="icon" />
voucher		./img/ic-voucher.svg	<IconVoucher class="icon" />
warehouse		./img/ic-warehouse.svg	<IconWarehouse class="icon" />
warning-fill		./img/ic-warning-fill.svg	<IconWarningFill class="icon" />
warning		./img/ic-warning.svg	<IconWarning class="icon" />
webhook		./img/ic-webhook.svg	<IconWebhook class="icon" />
world		./img/ic-world.svg	<IconWorld class="icon" />

Other channels

• LinkedIn
• Jobs
• AboutYou Tech Blog

License

Licensed under the MIT