From 5ae100b44f8cbd1c5455eb296030c1e232a2008f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 28 Sep 2021 21:37:48 +0100 Subject: [PATCH] :sparkles: Adds support for home-lab icons --- docs/icons.md | 38 +++++++++++++++++++++++++++ src/components/LinkItems/ItemIcon.vue | 7 +++++ src/utils/defaults.js | 1 + 3 files changed, 46 insertions(+) diff --git a/docs/icons.md b/docs/icons.md index 2b4bcd53..7267dc81 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -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. + diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue index b8c3f9c6..0696e5d8 100644 --- a/src/components/LinkItems/ItemIcon.vue +++ b/src/components/LinkItems/ItemIcon.vue @@ -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'; diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 49fa263c..387d26e4 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -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: {