From fb4cecb6bd370a4b66e206a98ec45e527fdd7aae Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Thu, 24 Apr 2025 19:21:09 +0200 Subject: [PATCH 1/3] docs(icons): enhance icon picker documentation and add search component --- docs/advanced/icons/index.mdx | 19 ++++++++++++++----- src/components/IconSearch.tsx | 24 ++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 src/components/IconSearch.tsx diff --git a/docs/advanced/icons/index.mdx b/docs/advanced/icons/index.mdx index 2700875b..3bd61fd5 100644 --- a/docs/advanced/icons/index.mdx +++ b/docs/advanced/icons/index.mdx @@ -8,10 +8,11 @@ tags: - Icon repositories --- +import { IconSearch } from '/src/components/IconSearch.tsx'; ## Icon picker Icons in Homarr are automatically requested from multiple sources: - - [Walkxcode Dashboard icons](https://github.com/walkxcode/dashboard-icons) + - [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with over 1888+ curated, high-quality icons - [selfh.st icons](https://github.com/selfhst/icons) - [Simple icons](https://github.com/simple-icons/simple-icons) - [Tabler icons](https://tabler-icons.io/) @@ -19,13 +20,21 @@ Icons in Homarr are automatically requested from multiple sources: - [Homelab Svg assets](https://github.com/loganmarchione/homelab-svg-assets) - **Local icons**: automatically fetched from the [medias feature](/docs/management/media/) -Using these icon sources, Homarr provides a total collection over over 11'000 icons at your fingertips. -The icon picker is a fast searcher that helps you to find your desired icon simply by entering search term. +Using these icon sources, Homarr provides a total collection of over 11,000 icons at your fingertips. +The icon picker is a fast searcher that helps you to find your desired icon simply by entering a search term. + +### Finding Missing Icons + +If you can't find the icon you're looking for in Homarr's built-in picker, we strongly recommend checking [Dashboard Icons](https://dashboardicons.com/). It offers a modern, user-friendly interface and a curated collection of high-quality icons specifically designed for dashboards and app directories. + +You can search Dashboard Icons directly using the search box below: + + ![Icon picker](./img/icon-picker.gif) -Icons, that are high quality and printable ([SVG](https://de.wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right. +Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right. ### Using external icons -If you do not wish to upload an icon in Homarr but you also didn't find the icon you're looking for, you can simply enter a URL that points to an icon. +If you don't find the icon you're looking for on Dashboard Icons or wish to use a different source, you can simply enter a URL that points to an icon. It is important that the URL directly points to the file without any advertisements or elements around it. \ No newline at end of file diff --git a/src/components/IconSearch.tsx b/src/components/IconSearch.tsx new file mode 100644 index 00000000..33887651 --- /dev/null +++ b/src/components/IconSearch.tsx @@ -0,0 +1,24 @@ +import { useState } from 'react'; + +export const IconSearch = () => { + const [searchTerm, setSearchTerm] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (searchTerm.trim()) { + window.location.href = `https://dashboardicons.com/icons?q=${encodeURIComponent(searchTerm)}`; + } + }; + + return ( +
+ setSearchTerm(e.target.value)} + placeholder="Search for icons on dashboardicons.com..." + className="w-full px-4 py-2 text-gray-700 bg-white border rounded-lg focus:outline-none focus:border-blue-500" + /> +
+ ); +}; \ No newline at end of file From 978c216cd4967a92303b2e38c9a284b5a308c793 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Fri, 25 Apr 2025 08:36:46 +0200 Subject: [PATCH 2/3] fix: Delete src/components/IconSearch.tsx --- src/components/IconSearch.tsx | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 src/components/IconSearch.tsx diff --git a/src/components/IconSearch.tsx b/src/components/IconSearch.tsx deleted file mode 100644 index 33887651..00000000 --- a/src/components/IconSearch.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useState } from 'react'; - -export const IconSearch = () => { - const [searchTerm, setSearchTerm] = useState(''); - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - if (searchTerm.trim()) { - window.location.href = `https://dashboardicons.com/icons?q=${encodeURIComponent(searchTerm)}`; - } - }; - - return ( -
- setSearchTerm(e.target.value)} - placeholder="Search for icons on dashboardicons.com..." - className="w-full px-4 py-2 text-gray-700 bg-white border rounded-lg focus:outline-none focus:border-blue-500" - /> -
- ); -}; \ No newline at end of file From 6a82edc6141cf41fb79d0048b60de17b5022bcbc Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Fri, 25 Apr 2025 08:37:33 +0200 Subject: [PATCH 3/3] fix: remove search input from icons page --- docs/advanced/icons/index.mdx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/docs/advanced/icons/index.mdx b/docs/advanced/icons/index.mdx index 3bd61fd5..2876559a 100644 --- a/docs/advanced/icons/index.mdx +++ b/docs/advanced/icons/index.mdx @@ -8,8 +8,6 @@ tags: - Icon repositories --- -import { IconSearch } from '/src/components/IconSearch.tsx'; - ## Icon picker Icons in Homarr are automatically requested from multiple sources: - [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with over 1888+ curated, high-quality icons @@ -27,14 +25,10 @@ The icon picker is a fast searcher that helps you to find your desired icon simp If you can't find the icon you're looking for in Homarr's built-in picker, we strongly recommend checking [Dashboard Icons](https://dashboardicons.com/). It offers a modern, user-friendly interface and a curated collection of high-quality icons specifically designed for dashboards and app directories. -You can search Dashboard Icons directly using the search box below: - - - ![Icon picker](./img/icon-picker.gif) Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right. ### Using external icons If you don't find the icon you're looking for on Dashboard Icons or wish to use a different source, you can simply enter a URL that points to an icon. -It is important that the URL directly points to the file without any advertisements or elements around it. \ No newline at end of file +It is important that the URL directly points to the file without any advertisements or elements around it.