@scayle/panel-icons
v4.3.0
All the Panel icons you know and love
0/weekUpdated 1 months agoMITUnpacked: 288.6 KB
Published by p-r-scayle
npm install @scayle/panel-icons
SCAYLE Panel Icons Library
Documentation |
Website
The SCAYLE Panel Icons Library offers all the Panel icons you know and love.
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 SCAYLE’s architecture and commerce modules in the Docs.
Installation
``shell`
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 3.0.0 to 4.3.0
To upgrade your panel-icons library, change the version for @scayle/panel-icons to "^4.3.0"
#### New icons in version 4.3.0
- triangle-down
- triangle-left
- triangle-up
#### New icons in version 4.2.0
- product-ai
#### New icons in version 4.1.0
- column-settings
#### New icons in version 4.0.1
- sort-descending
- code
- logo-scayle
- logo-tradebyte
- logo-tradebyte-green
- logo-tradebyte-grey
- marketplaces
- shop
- sort-ascending
#### Breaking changes in version 4.0.0
- Undocumented icons have been removed
#### New icons in version 3.5.0
- pallet-boxes
#### New icons in version 3.3.0
- key-permissions
#### New icons in version 3.2.0
- clock
- device-tablet
- git-branch
- git-commit
- loading
#### New icons in version 3.1.0
- payments
Upgrade guide from version 2.2.0 to 3.0.0
To upgrade your panel-icons library, change the version for @scayle/panel-icons to "^3.0.0"
#### The size of individual Icons has been standardized
- carrier
- list-view
- loyalty
- nested-list-view
- sust-cotton
- tile-view
#### New icons
- calculator
- check-circle
- revert
Upgrade guide from version 1.4.2 to 2.0.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__
`typescript
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
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.
`vue`
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 | |./icons/add.svg
| add |  | | |./icons/analytics.svg
| analytics |  | | |./icons/app.svg
| app |  | | |./icons/arrow-bottom-right.svg
| arrow-bottom-right |  | | |./icons/arrow-circle-down.svg
| arrow-circle-down |  | | |./icons/arrow-circle-filled-down.svg
| arrow-circle-filled-down |  | | |./icons/arrow-circle-filled-left.svg
| arrow-circle-filled-left |  | | |./icons/arrow-circle-filled-right.svg
| arrow-circle-filled-right |  | | |./icons/arrow-circle-filled-up.svg
| arrow-circle-filled-up |  | | |./icons/arrow-circle-left.svg
| arrow-circle-left |  | | |./icons/arrow-circle-right.svg
| arrow-circle-right |  | | |./icons/arrow-circle-up.svg
| arrow-circle-up |  | | |./icons/arrow-down.svg
| arrow-down |  | | |./icons/arrow-left.svg
| arrow-left |  | | |./icons/arrow-left-right.svg
| arrow-left-right |  | | |./icons/arrow-right.svg
| arrow-right |  | | |./icons/arrow-up.svg
| arrow-up |  | | |./icons/attach.svg
| attach |  | | |./icons/ban.svg
| ban |  | | |./icons/bars.svg
| bars |  | | |./icons/basket.svg
| basket |  | | |./icons/bell.svg
| bell |  | | |./icons/bell-add.svg
| bell-add |  | | |./icons/bell-disabled.svg
| bell-disabled |  | | |./icons/book-open.svg
| book-open |  | | |./icons/bookmark.svg
| bookmark |  | | |./icons/bookmark-fill.svg
| bookmark-fill |  | | |./icons/bookmark-off.svg
| bookmark-off |  | | |./icons/box-search.svg
| box-search |  | | |./icons/box-success.svg
| box-success |  | | |./icons/calculator.svg
| calculator |  | | |./icons/calendar.svg
| calendar |  | | |./icons/calendar-in.svg
| calendar-in |  | | |./icons/calendar-out.svg
| calendar-out |  | | |./icons/calendar-time.svg
| calendar-time |  | | |./icons/carrier.svg
| carrier |  | | |./icons/certificate.svg
| certificate |  | | |./icons/channel.svg
| channel |  | | |./icons/chart-bars.svg
| chart-bars |  | | |./icons/chart-pie.svg
| chart-pie |  | | |./icons/chat-bubbles.svg
| chat-bubbles |  | | |./icons/check-circle.svg
| check-circle |  | | |./icons/checkmark.svg
| checkmark |  | | |./icons/checkout-settings.svg
| checkout-settings |  | | |./icons/chevron-double-down.svg
| chevron-double-down |  | | |./icons/chevron-double-left.svg
| chevron-double-left |  | | |./icons/chevron-double-right.svg
| chevron-double-right |  | | |./icons/chevron-double-up.svg
| chevron-double-up |  | | |./icons/chevron-down.svg
| chevron-down |  | | |./icons/chevron-left.svg
| chevron-left |  | | |./icons/chevron-right.svg
| chevron-right |  | | |./icons/chevron-up.svg
| chevron-up |  | | |./icons/chevron-up-down.svg
| chevron-up-down |  | | |./icons/chevron-up-down-table.svg
| chevron-up-down-table |  | | |./icons/circle-outline-strip.svg
| circle-outline-strip |  | | |./icons/clock.svg
| clock |  | | |./icons/close.svg
| close |  | | |./icons/cloud.svg
| cloud |  | | |./icons/code.svg
| code |  | | |./icons/column-settings.svg
| column-settings |  | | |./icons/coffee.svg
| coffee |  | | |./icons/connection-multi.svg
| connection-multi |  | | |./icons/contact-badge.svg
| contact-badge |  | | |./icons/contract.svg
| contract |  | | |./icons/convert.svg
| convert |  | | |./icons/copy.svg
| copy |  | | |./icons/crown.svg
| crown |  | | |./icons/dashboard.svg
| dashboard |  | | |./icons/data-table.svg
| data-table |  | | |./icons/device-desktop.svg
| device-desktop |  | | |./icons/device-mobile.svg
| device-mobile |  | | |./icons/device-tablet.svg
| device-tablet |  | | |./icons/discount.svg
| discount |  | | |./icons/dollar-note.svg
| dollar-note |  | | |./icons/download.svg
| download |  | | |./icons/drag.svg
| drag |  | | |./icons/edit.svg
| edit |  | | |./icons/education.svg
| education |  | | |./icons/email.svg
| email |  | | |./icons/error.svg
| error |  | | |./icons/error-fill.svg
| error-fill |  | | |./icons/expand.svg
| expand |  | | |./icons/external.svg
| external |  | | |./icons/eye.svg
| eye |  | | |./icons/eye-striked.svg
| eye-striked |  | | |./icons/file-csv.svg
| file-csv |  | | |./icons/file-pdf.svg
| file-pdf |  | | |./icons/file-return-docs.svg
| file-return-docs |  | | |./icons/file-text.svg
| file-text |  | | |./icons/file-xls.svg
| file-xls |  | | |./icons/filter.svg
| filter |  | | |./icons/flag.svg
| flag |  | | |./icons/folder.svg
| folder |  | | |./icons/folder-fill.svg
| folder-fill |  | | |./icons/folder-open-fill.svg
| folder-open-fill |  | | |./icons/forbidden-return-documents.svg
| forbidden-return-documents |  | | |./icons/forward.svg
| forward |  | | |./icons/gift.svg
| gift |  | | |./icons/git-branch.svg
| git-branch |  | | |./icons/git-commit.svg
| git-commit |  | | |./icons/globe.svg
| globe |  | | |./icons/globe-checkmark.svg
| globe-checkmark |  | | |./icons/half.svg
| half |  | | |./icons/headset.svg
| headset |  | | |./icons/heart.svg
| heart |  | | |./icons/heart-fill.svg
| heart-fill |  | | |./icons/id.svg
| id |  | | |./icons/image-single.svg
| image-single |  | | |./icons/image-stacked.svg
| image-stacked |  | | |./icons/import.svg
| import |  | | |./icons/info.svg
| info |  | | |./icons/info-fill.svg
| info-fill |  | | |./icons/invoice.svg
| invoice |  | | |./icons/key.svg
| key |  | | |./icons/key-framed.svg
| key-framed |  | | |./icons/key-permissions.svg
| key-permissions |  | | |./icons/layout.svg
| layout |  | | |./icons/link.svg
| link |  | | |./icons/link-disconnect.svg
| link-disconnect |  | | |./icons/list-attributes.svg
| list-attributes |  | | |./icons/list-view.svg
| list-view |  | | |./icons/loading.svg
| loading |  | | |./icons/location.svg
| location |  | | |./icons/lock.svg
| lock |  | | |./icons/lock-open.svg
| lock-open |  | | |./icons/logic.svg
| logic |  | | |./icons/logistics-box-trolley.svg
| logistics-box-trolley |  | | |./icons/logistics-boxes-crane.svg
| logistics-boxes-crane |  | | |./icons/logo-scayle.svg
| logo-scayle |  | | |./icons/logo-tradebyte.svg
| logo-tradebyte |  | | |./icons/logo-tradebyte-green.svg
| logo-tradebyte-green |  | | |./icons/logo-tradebyte-grey.svg
| logo-tradebyte-grey |  | | |./icons/loudspeaker.svg
| loudspeaker |  | | |./icons/loyalty.svg
| loyalty |  | | |./icons/luxury.svg
| luxury |  | | |./icons/magic-wand.svg
| magic-wand |  | | |./icons/mail-error.svg
| mail-error |  | | |./icons/marketplace-aboutyou.svg
| marketplace-aboutyou |  | | |./icons/marketplaces.svg
| marketplaces |  | | |./icons/menu.svg
| menu |  | | |./icons/minus.svg
| minus |  | | |./icons/money.svg
| money |  | | |./icons/more.svg
| more |  | | |./icons/more-horizontal.svg
| more-horizontal |  | | |./icons/nested-list-view.svg
| nested-list-view |  | | |./icons/notes.svg
| notes |  | | |./icons/off.svg
| off |  | | |./icons/office.svg
| office |  | | |./icons/order-e.svg
| order-e |  | | |./icons/ordered-list.svg
| ordered-list |  | | |./icons/outfit.svg
| outfit |  | | |./icons/package.svg
| package |  | | |./icons/page.svg
| page |  | | |./icons/pallet-boxes.svg
| pallet-boxes |  | | |./icons/parcel.svg
| parcel |  | | |./icons/parcel-down.svg
| parcel-down |  | | |./icons/parcel-search.svg
| parcel-search |  | | |./icons/paste.svg
| paste |  | | |./icons/pay.svg
| pay |  | | |./icons/payments.svg
| payments |  | | |./icons/percentage.svg
| percentage |  | | |./icons/percentage-circle.svg
| percentage-circle |  | | |./icons/phone.svg
| phone |  | | |./icons/placeholder.svg
| placeholder |  | | |./icons/player-pause.svg
| player-pause |  | | |./icons/player-play.svg
| player-play |  | | |./icons/polaroid.svg
| polaroid |  | | |./icons/product-ai.svg
| product-ai |  | | |./icons/product-import.svg
| product-import |  | | |./icons/question.svg
| question |  | | |./icons/question-fill.svg
| question-fill |  | | |./icons/question-filled.svg
| question-filled |  | | |./icons/refresh.svg
| refresh |  | | |./icons/restore.svg
| restore |  | | |./icons/revert.svg
| revert |  | | |./icons/rule-engine.svg
| rule-engine |  | | |./icons/save.svg
| save |  | | |./icons/scan.svg
| scan |  | | |./icons/search.svg
| search |  | | |./icons/send.svg
| send |  | | |./icons/seo.svg
| seo |  | | |./icons/separate.svg
| separate |  | | |./icons/server.svg
| server |  | | |./icons/settings.svg
| settings |  | | |./icons/settings-wheel.svg
| settings-wheel |  | | |./icons/share.svg
| share |  | | |./icons/shirt.svg
| shirt |  | | |./icons/shirt-download.svg
| shirt-download |  | | |./icons/shirt-new.svg
| shirt-new |  | | |./icons/shirt-success.svg
| shirt-success |  | | |./icons/shop.svg
| shop |  | | |./icons/shrink.svg
| shrink |  | | |./icons/smiley-average.svg
| smiley-average |  | | |./icons/smiley-bad.svg
| smiley-bad |  | | |./icons/smiley-good.svg
| smiley-good |  | | |./icons/sort-ascending.svg
| sort-ascending |  | | |./icons/sort-bottom-to-top.svg
| sort-bottom-to-top |  | | |./icons/sort-descending.svg
| sort-descending |  | | |./icons/sort-top-to-bottom.svg
| sort-top-to-bottom |  | | |./icons/sparkle.svg
| sparkle |  | | |./icons/sparkle-fill.svg
| sparkle-fill |  | | |./icons/spelling-mistake.svg
| spelling-mistake |  | | |./icons/stack.svg
| stack |  | | |./icons/star.svg
| star |  | | |./icons/star-fill.svg
| star-fill |  | | |./icons/stopwatch.svg
| stopwatch |  | | |./icons/store.svg
| store |  | | |./icons/store-location.svg
| store-location |  | | |./icons/structure.svg
| structure |  | | |./icons/structure-horizontal.svg
| structure-horizontal |  | | |./icons/structure-vertical.svg
| structure-vertical |  | | |./icons/style.svg
| style |  | | |./icons/success.svg
| success |  | | |./icons/success-fill.svg
| success-fill |  | | |./icons/sust-cotton.svg
| sust-cotton |  | | |./icons/swap-horizontal.svg
| swap-horizontal |  | | |./icons/swap-vertical.svg
| swap-vertical |  | | |./icons/tablet.svg
| tablet |  | | |./icons/tag.svg
| tag |  | | |./icons/target.svg
| target |  | | |./icons/task.svg
| task |  | | |./icons/tax.svg
| tax |  | | |./icons/technology.svg
| technology |  | | |./icons/text.svg
| text |  | | |./icons/text-bold.svg
| text-bold |  | | |./icons/text-center.svg
| text-center |  | | |./icons/text-italic.svg
| text-italic |  | | |./icons/text-justify.svg
| text-justify |  | | |./icons/text-left.svg
| text-left |  | | |./icons/text-paragraph.svg
| text-paragraph |  | | |./icons/text-right.svg
| text-right |  | | |./icons/text-underline.svg
| text-underline |  | | |./icons/tile-view.svg
| tile-view |  | | |./icons/translate.svg
| translate |  | | |./icons/trash.svg
| trash |  | | |./icons/trend-down.svg
| trend-down |  | | |./icons/trend-up.svg
| trend-up |  | | |./icons/triangle-down.svg
| triangle-down |  | | |./icons/triangle-left.svg
| triangle-left |  | | |./icons/triangle-right.svg
| triangle-right |  | | |./icons/triangle-up.svg
| triangle-up |  | | |./icons/truck.svg
| truck |  | | |./icons/two-fa-restore.svg
| two-fa-restore |  | | |./icons/ufo.svg
| ufo |  | | |./icons/undo.svg
| undo |  | | |./icons/user.svg
| user |  | | |./icons/user-add.svg
| user-add |  | | |./icons/user-edit.svg
| user-edit |  | | |./icons/user-key.svg
| user-key |  | | |./icons/user-merchant.svg
| user-merchant |  | | |./icons/user-permissions.svg
| user-permissions |  | | |./icons/user-remove.svg
| user-remove |  | | |./icons/users.svg
| users |  | | |./icons/users-exchange.svg
| users-exchange |  | | |./icons/voucher.svg
| voucher |  | | |./icons/warehouse.svg
| warehouse |  | | |./icons/warning.svg
| warning |  | | |./icons/warning-circle.svg
| warning-circle |  | | |./icons/warning-circle-fill.svg
| warning-circle-fill |  | | |./icons/warning-fill.svg
| warning-fill |  | | |./icons/webhook.svg
| webhook |  | |
Other channels
License
Licensed under the MIT