Add selfh.st/icons support

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
 
 

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. <br>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. <br>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)**
 

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-`.
 
 <p align="center">
   <img width="580" src="https://i.ibb.co/MVhkXfC/simple-icons-example.png" />
@@ -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.
+
+<p align="center">
+  <img width="580" src="https://i.ibb.co/pfy09LH/Screenshot-from-2025-01-08-22-04-21.png" />
+</p>
+
+---
+
 ## 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.

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();

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",

src/utils/defaults.js

@@ -210,6 +210,7 @@ module.exports = {
     fa: 'https://kit.fontawesome.com',
     mdi: 'https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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',