diff --git a/README.md b/README.md index 54f42975..5de3243b 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 diff --git a/docs/configuring.md b/docs/configuring.md index 266b98a1..a058d072 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -322,7 +322,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)** diff --git a/docs/icons.md b/docs/icons.md index df0e9c69..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) @@ -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. 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/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", diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 787c440b..677f27e9 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',