From 12372f826eac85c384d753d58a638d27c9823151 Mon Sep 17 00:00:00 2001 From: LinuxSBC Date: Wed, 8 Jan 2025 21:44:53 -0600 Subject: [PATCH 1/5] Add selfh.st/icons support --- src/components/LinkItems/ItemIcon.vue | 6 ++++++ src/utils/defaults.js | 1 + 2 files changed, 7 insertions(+) diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue index e019b213..635ccbc4 100644 --- a/src/components/LinkItems/ItemIcon.vue +++ b/src/components/LinkItems/ItemIcon.vue @@ -72,6 +72,7 @@ export default { 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('sh-')) imgType = 'selfhst-icons'; else if (img.includes('favicon-')) imgType = 'custom-favicon'; else if (img === 'favicon') imgType = 'favicon'; else if (img === 'generative') imgType = 'generative'; @@ -90,6 +91,7 @@ export default { case 'mdi': return img; // Material design icons case 'simple-icons': return this.getSimpleIcon(img); case 'home-lab-icons': return this.getHomeLabIcon(img); + case 'selfhst-icons': return this.getSelfhstIcon(img); // selfh.st/icons case 'svg': return img; // Local SVG icon case 'emoji': return img; // Emoji/ unicode default: return ''; @@ -195,6 +197,10 @@ export default { } return icon.path; }, + getSelfhstIcon(img, cdn) { + const imageName = img.slice(3).toLocaleLowerCase(); + return (cdn || iconCdns.sh).replace('{icon}', imageName); + }, /* Gets home-lab icon from GitHub */ getHomeLabIcon(img, cdn) { const imageName = img.replace('hl-', '').toLocaleLowerCase(); diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 88b5757d..0d243baf 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -210,6 +210,7 @@ module.exports = { fa: 'https://kit.fontawesome.com', mdi: 'https://cdn.jsdelivr.net/npm/@mdi/font@7.0.96/css/materialdesignicons.min.css', si: 'https://unpkg.com/simple-icons@v7/icons', + sh: 'https://cdn.jsdelivr.net/gh/selfhst/icons@latest/webp/{icon}.webp', generative: 'https://api.dicebear.com/7.x/identicon/svg?seed={icon}', generativeFallback: 'https://evatar.io/{icon}', localPath: './item-icons', From 17d6c2f57eedd4862e7c5873845e0ea56dcc4d8b Mon Sep 17 00:00:00 2001 From: LinuxSBC Date: Wed, 8 Jan 2025 22:07:59 -0600 Subject: [PATCH 2/5] Update documentation --- docs/icons.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/icons.md b/docs/icons.md index 4a592d9a..67ef94fd 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -7,6 +7,7 @@ Both sections and items can have an icon, which is specified using the `icon` at - [Simple Icons](#simple-icons) - [Generative Icons](#generative-icons) - [Emoji Icons](#emoji-icons) +- [selfh.st Icons](#selfhst-icons) - [Home-Lab Icons](#home-lab-icons) - [Material Icons](#material-design-icons) - [Icons by URL](#icons-by-url) @@ -63,7 +64,7 @@ Font-Awesome has a wide variety of free icons, but you can also use their pro ic ## Simple Icons -[SimpleIcons.org](https://simpleicons.org/) is a collection of 2000+ high quality, free and open source brand and logo SVG icons. Usage of which is very similar to font-awesome icons. First find the glyph you want to use on the [website](https://simpleicons.org/), then just set your icon the the simple icon slug, prefixed with `si-`. +[SimpleIcons.org](https://simpleicons.org/) is a collection of 2000+ high quality, free and open source brand and logo SVG icons. Usage of which is very similar to font-awesome icons. First find the glyph you want to use on the [website](https://simpleicons.org/), then just set your icon to the simple icon slug, prefixed with `si-`.

@@ -109,6 +110,18 @@ For example, these will all render the same rocket (🚀) emoji: `icon: ':rocket --- +## selfh.st Icons + +The [selfh.st](https://selfh.st/) project provides a set of icons, originally for self-hosted services, but now expanded to include a wide variety of services. These icons can be used by specifying the icon name (without extension and with all spaces replaced with -) preceded by `sh-`. See https://selfh.st/icons/ for a full list of all available icons. For example, the Home Assistant icon is `sh-home-assistant`. + +Note: These icons are fetched from the jsdelivr CDN, so if you require offline access, the [Local Icons](#local-icons) method may be a better option for you. + +

+ +

+ +--- + ## 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-`. See [here](https://github.com/walkxcode/Dashboard-Icons/tree/main/png) for a full list of all available icons. Note that these are fetched and cached straight from GitHub, so if you require offline access, the [Local Icons](#local-icons) method may be a better option for you. From 675a387b029e7c351efe4add904ad03c4be85abe Mon Sep 17 00:00:00 2001 From: LinuxSBC Date: Wed, 8 Jan 2025 22:15:26 -0600 Subject: [PATCH 3/5] Add selfh.st to config information --- src/utils/ConfigSchema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index 4fe05760..87a11840 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -941,7 +941,7 @@ "title": "Icon", "type": "string", "nullable": true, - "description": "An icon, either as a font-awesome, simple-icon or mdi identifier, emoji, favicon, generative or the URL/ path to a local or remote icon asset" + "description": "An icon, either as a font-awesome, simple-icon, selfh.st, or mdi identifier, emoji, favicon, generative or the URL/path to a local or remote icon asset" }, "url": { "title": "Service URL", From b1b5da858adcf2452cc1e191fda19b3c8aef81be Mon Sep 17 00:00:00 2001 From: LinuxSBC Date: Wed, 8 Jan 2025 22:38:01 -0600 Subject: [PATCH 4/5] Add new icon option to configuring.md --- docs/configuring.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configuring.md b/docs/configuring.md index c10088f0..a311a8dd 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -320,7 +320,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)** **Field** | **Type** | **Required**| **Description** --- | --- | --- | --- -**`icon`** | `string` | _Optional_ | The icon for a given item or section.
See [Icon Docs](/docs/icons.md) for all available supported icon types, including: auto-fetched favicons, generative icons, emoji icons, home-lab service logos, font-awesome, simple-icons, material icons, and icons specified by URL +**`icon`** | `string` | _Optional_ | The icon for a given item or section.
See [Icon Docs](/docs/icons.md) for all available supported icon types, including: auto-fetched favicons, generative icons, emoji icons, home-lab service logos, font-awesome, simple-icons, material icons, selfh.st icons, and icons specified by URL **[⬆️ Back to Top](#configuring)** From 88a6c22c40666b5f4dab3f72a23199232e9f8fab Mon Sep 17 00:00:00 2001 From: LinuxSBC Date: Wed, 8 Jan 2025 22:44:16 -0600 Subject: [PATCH 5/5] Update icon information in README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d2052103..8be1c25b 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,7 @@ Both sections and items can have an icon associated with them, defined under the The following icon types are supported: - **Favicon** - Automatically fetch an apps icon from its Favicon or logo image -- **Icon Packs** - Use any icon from [font-awesome], [simple-icons] or [material icons] +- **Icon Packs** - Use any icon from [font-awesome], [simple-icons], [selfh.st/icons], or [material icons] - **Emoji** - Any valid emoji can be used as an icon - **Generative** - Unique, auto-generated images for easily identifying services - **URL** - Pass the URL of any valid image in to have it fetched and rendered @@ -209,6 +209,7 @@ The following icon types are supported: [font-awesome]: https://fontawesome.com/icons [simple-icons]: https://simpleicons.org/ [material icons]: https://github.com/Templarian/MaterialDesign +[selfh.st/icons]: https://selfh.st/icons [dashboard-icons]: https://github.com/WalkxCode/dashboard-icons