The SCAYLE Panel Icons Library offers all the Panel icons you know and love.
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.
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.
npm i -S @scayle/panel-icons
The icons/
directory contains all the icon files as svg. Do what you want with them.
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
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.
Licensed under the MIT