From 5063b475dd387cf536db8c4242dc96480661cf03 Mon Sep 17 00:00:00 2001 From: Lukas Kalbertodt Date: Wed, 4 Oct 2023 12:55:16 +0200 Subject: [PATCH 1/2] Add icon guidelines --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 0deac6f..6774fb0 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,27 @@ that's the whole point: to get a pre-defined design. - Provide color values, most likely by copying [`colors.css`](./src/colors.css) into your `index.html`. See "colors" section below. - Optionally configure appkit via `AppkitConfigProvider`. +## Icons + +While this library does not ship any icons itself, apps in the Opencast context should follow these rules to ensure consistency: + +- **Use [Lucide icons](https://lucide.dev/)!** + - Historical note: this is a fork and superset of [Feather icons](https://feathericons.com/), which is not maintained anymore. + Lucide contains a lot more icons. + Even if Feather icons are identical to Lucide, always import the Lucide icon for code consistency! +- In special cases, you can use icons from [Hero icons v1 (outline version)](https://v1.heroicons.com/). + Those icons look visually very similar to Lucide icons. + Still: there should be a good reason for not using Lucide! + Currently, there are two important exceptions in which you should use the Hero icons: + - Hero's `search` is better than the one from Lucide, which is too stubby and looks like a Q. + - Hero's `translate` is much better than Lucides `languages` and more on point than `globe`. + +It's convenient to use [`react-icons`](https://react-icons.github.io/react-icons/) to import all needed icons into your codebase. + +Should your app require an icon that's not available in Lucide or Hero, you can create a new one. +This should follow [Lucide's Design Principles](https://lucide.dev/guide/design/icon-design-guide). +Unless the icon is very particular (i.e. unlikely to be useful in any other application), it should be [contributed back to Lucide](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md). + ## Colors From e27fd447aedfdc2e912a0ae391c28544d9e236d1 Mon Sep 17 00:00:00 2001 From: Lukas Kalbertodt Date: Wed, 6 Dec 2023 15:16:35 +0100 Subject: [PATCH 2/2] Address review comments - Historical note removed - Remove wiggle room with exception and just name the two as only exceptions - Reformulated some stuff --- README.md | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 6774fb0..0a6a84a 100644 --- a/README.md +++ b/README.md @@ -16,24 +16,14 @@ that's the whole point: to get a pre-defined design. - Provide color values, most likely by copying [`colors.css`](./src/colors.css) into your `index.html`. See "colors" section below. - Optionally configure appkit via `AppkitConfigProvider`. -## Icons +## Icons: [Lucide](https://lucide.dev/) -While this library does not ship any icons itself, apps in the Opencast context should follow these rules to ensure consistency: +While this library does not ship any icons itself, apps in the Opencast context should use the same icons to ensure consistency. +Therefore, **use [Lucide icons](https://lucide.dev/)!** +There are only two exceptions: use `search` and `translate` from [Hero icons v1 (outline version)](https://v1.heroicons.com/) instead of the alternatives from Lucide. +Hint: it's convenient to use [`react-icons`](https://react-icons.github.io/react-icons/) to import all needed icons into your codebase. -- **Use [Lucide icons](https://lucide.dev/)!** - - Historical note: this is a fork and superset of [Feather icons](https://feathericons.com/), which is not maintained anymore. - Lucide contains a lot more icons. - Even if Feather icons are identical to Lucide, always import the Lucide icon for code consistency! -- In special cases, you can use icons from [Hero icons v1 (outline version)](https://v1.heroicons.com/). - Those icons look visually very similar to Lucide icons. - Still: there should be a good reason for not using Lucide! - Currently, there are two important exceptions in which you should use the Hero icons: - - Hero's `search` is better than the one from Lucide, which is too stubby and looks like a Q. - - Hero's `translate` is much better than Lucides `languages` and more on point than `globe`. - -It's convenient to use [`react-icons`](https://react-icons.github.io/react-icons/) to import all needed icons into your codebase. - -Should your app require an icon that's not available in Lucide or Hero, you can create a new one. +Should your app require an icon that's not available in Lucide, you can create a new one (or check Hero). This should follow [Lucide's Design Principles](https://lucide.dev/guide/design/icon-design-guide). Unless the icon is very particular (i.e. unlikely to be useful in any other application), it should be [contributed back to Lucide](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).