mirror of https://github.com/Lissy93/dashy.git
✨ Adds support for home-lab icons
This commit is contained in:
parent
877585b19d
commit
5ae100b44f
|
@ -94,6 +94,27 @@ For example, these will all render the same rocket (🚀) emoji: `icon: ':rocket
|
|||
|
||||
---
|
||||
|
||||
## Home-Lab Icons
|
||||
|
||||
The [dashboard-icons](https://github.com/WalkxCode/dashboard-icons) repo by [@WalkxCode](https://github.com/WalkxCode) provides a comprehensive collection of 360+ high-quality PNG icons for commonly self-hosted services. Dashy natively supports these icons, and you can use them just by specifying the icon name (without extension) preceded by `hl-`. You can see a full list of all available icons [here](https://github.com/WalkxCode/dashboard-icons/tree/master/png).
|
||||
|
||||
For example:
|
||||
```yaml
|
||||
sections:
|
||||
- name: Home Lab Icons Example
|
||||
items:
|
||||
- title: AdGuard Home
|
||||
icon: hl-adguardhome
|
||||
- title: Long Horn
|
||||
icon: hl-longhorn
|
||||
- title: Nagios
|
||||
icon: hl-nagios
|
||||
- title: Whoogle Search
|
||||
icon: hl-whooglesearch
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Icons by URL
|
||||
You can also set an icon by passing in a valid URL pointing to the icons location. For example `icon: https://i.ibb.co/710B3Yc/space-invader-x256.png`, this can be in .png, .jpg or .svg format, and hosted anywhere- so long as it's accessible from where you are hosting Dashy. The icon will be automatically scaled to fit, however loading in a lot of large icons may have a negative impact on performance, especially if you visit Dashy from new devices often.
|
||||
|
||||
|
@ -127,3 +148,20 @@ sections:
|
|||
|
||||
## No Icon
|
||||
If you don't wish for a given item or section to have an icon, just leave out the `icon` attribute.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Icon Collections and Resources
|
||||
|
||||
The following website provide good-quality, free icon sets. To use any of these icons, just copy the link to the raw icon (it should end in `.svg` or `.png`) and paste it as your `icon`, or download and save the icons in `/public/item-icons` or pass through with a Docker volume as described above.
|
||||
Full credit to the authors, please see the licenses for each service for usage and copyright information.
|
||||
|
||||
- [dashboard-icons](https://github.com/WalkxCode/dashboard-icons) - 350+ high-quality icons for commonly self-hosted services, maintained by [@WalkxCode](https://github.com/WalkxCode)
|
||||
- [SVG Box](https://svgbox.net/iconsets/) - Cryptocurrency, social media apps and flag icons
|
||||
- [Simple Icons](https://simpleicons.org/) - Free SVG brand icons, with easy API access
|
||||
- [Icons8](https://icons8.com/icons) - Thousands of icons, all with free 64x64 versions
|
||||
- [Flat Icon](https://www.flaticon.com/) - Wide variety of icon sets, almost all free to use
|
||||
|
||||
If you are a student, then you can get free access to premium icons on [Icon Scout](https://education.github.com/pack/redeem/iconscout-student) or [Icons8](https://icons8.com/github-students) using the GitHub Student Pack.
|
||||
|
||||
|
|
|
@ -135,6 +135,11 @@ export default {
|
|||
const icon = simpleIcons.Get(imageName);
|
||||
return icon.path;
|
||||
},
|
||||
/* Gets home-lab icon from GitHub */
|
||||
getHomeLabIcon(img) {
|
||||
const imageName = img.replace('hl-', '').toLocaleLowerCase();
|
||||
return `${iconCdns.homeLabIcons}/png/${imageName}.png`;
|
||||
},
|
||||
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
|
||||
getIconPath(img, url) {
|
||||
switch (this.determineImageType(img)) {
|
||||
|
@ -145,6 +150,7 @@ export default {
|
|||
case 'generative': return this.getGenerativeIcon(url);
|
||||
case 'mdi': return img; // Material design icons
|
||||
case 'simple-icons': return this.getSimpleIcon(img);
|
||||
case 'home-lab-icons': return this.getHomeLabIcon(img);
|
||||
case 'svg': return img; // Local SVG icon
|
||||
case 'emoji': return img; // Emoji/ unicode
|
||||
default: return '';
|
||||
|
@ -159,6 +165,7 @@ export default {
|
|||
else if (img.includes('fa-')) imgType = 'font-awesome';
|
||||
else if (img.includes('mdi-')) imgType = 'mdi';
|
||||
else if (img.includes('si-')) imgType = 'si';
|
||||
else if (img.includes('hl-')) imgType = 'home-lab-icons';
|
||||
else if (img.includes('favicon-')) imgType = 'custom-favicon';
|
||||
else if (img === 'favicon') imgType = 'favicon';
|
||||
else if (img === 'generative') imgType = 'generative';
|
||||
|
|
|
@ -176,6 +176,7 @@ module.exports = {
|
|||
generative: 'https://ipsicon.io',
|
||||
localPath: '/item-icons',
|
||||
faviconName: 'favicon.ico',
|
||||
homeLabIcons: 'https://raw.githubusercontent.com/WalkxCode/dashboard-icons/master/',
|
||||
},
|
||||
/* URLs for web search engines */
|
||||
searchEngineUrls: {
|
||||
|
|
Loading…
Reference in New Issue