Skip to content

Commit f12fdbf

Browse files
SchneegansSchneegans
committed
📝 Add icon color guide
1 parent e994cb2 commit f12fdbf

File tree

6 files changed

+144
-6
lines changed

6 files changed

+144
-6
lines changed

‎astro.config.mjs

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,17 @@ export default defineConfig({
6464
],
6565
},
6666
{
67-
label: 'Advanced Usage',
67+
label: 'Customizing Kando',
6868
items: [
69-
'opening-menus',
7069
'menu-themes',
7170
'sound-themes',
7271
'icon-themes',
72+
],
73+
},
74+
{
75+
label: 'Advanced Usage',
76+
items: [
77+
'opening-menus',
7378
'launch-from-cli',
7479
],
7580
},

‎src/assets/img/custom-icons.png

346 KB
Loading

‎src/assets/img/example-svg-current.svg

Lines changed: 17 additions & 0 deletions
Loading

‎src/assets/img/example-svg-fill-red.svg

Lines changed: 17 additions & 0 deletions
Loading

‎src/assets/img/example-svg-mixed.svg

Lines changed: 17 additions & 0 deletions
Loading

‎src/content/docs/icon-themes.mdx

Lines changed: 86 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import CustomCard from '../../components/CustomCard.astro';
1111
import Intro from '../../components/Intro.astro';
1212
import { Icon } from 'astro-icon/components';
1313

14+
import exampleSVGFixed from '../../assets/img/example-svg-fill-red.svg?raw';
15+
import exampleSVGCurrent from '../../assets/img/example-svg-current.svg?raw';
16+
import exampleSVGMixed from '../../assets/img/example-svg-mixed.svg?raw';
17+
1418
![banner](../../assets/banners/banner10.png)
1519

1620
<Intro>
@@ -20,21 +24,27 @@ Kando comes with a few icon themes pre-installed and you can easily add your own
2024

2125
## <Icon name="solar:backpack-bold-duotone" class="inline-icon" /> Built-in Icon Themes
2226

27+
![icon-themes](../../assets/img/icon-themes.png)
28+
2329
Kando comes with a few icon themes pre-installed. You can select them in the icon picker in the menu editor.
30+
Here's a list of the built-in icon themes:
2431

2532
1. [Simple Icons](https://simpleicons.org) (Plain & Colored): A set of icons for popular brands.
2633
2. [Material Symbols Rounded](https://fonts.google.com/icons): An icon set for common actions and objects.
2734
3. Base64 / URL: This allows you to use any icon from the web or your local file system by providing a Base64-encoded string or a URL.
2835
4. Emojis: This allows you to use any emoji as an icon.
2936
5. Kando's own icons: Kando comes with a few icons which are used per default for new menu items.
3037

38+
The Simple Icons, the Material Symbols, and Kando's own icons are set up in such a way that they will change their color automatically based on the used menu theme.
39+
You can learn how to make your own icons behave like this further below!
40+
3141
## <Icon name="solar:gallery-minimalistic-bold-duotone" class="inline-icon" /> Adding Your Own Icon Theme
3242

3343
To add your own icons to Kando, follow these steps:
3444

3545
<Steps>
3646

37-
1. Create a directory for your icon theme inside the `icon-themes` directory. You can give it any name you like. Where this directory is located depends on your operating system:
47+
1. **Create an icon-theme directory** for your icon theme inside the `icon-themes` directory. You can give it any name you like. Where this directory is located depends on your operating system:
3848

3949
<Tabs syncKey="os">
4050
<TabItem label="Windows" icon="seti:windows">
@@ -82,19 +92,91 @@ To add your own icons to Kando, follow these steps:
8292

8393
4. Select your icon theme in the icon-theme dropdown in the icon picker in Kando's menu editor.
8494

85-
![icon-themes](../../assets/img/icon-themes.png)
95+
![custom-icon-themes](../../assets/img/custom-icons.png)
8696

8797
</Steps>
8898

89-
## <Icon name="solar:lightbulb-minimalistic-bold-duotone" class="inline-icon" /> Suggestions for Icon Sets
99+
### Make Icon-Colors Adaptive
100+
101+
<Aside type="note">
102+
Your icons need to be SVG files for this to work because this relies on the [`currentColor`](https://echobind.com/post/currentcolor-css-property-with-svg) SVG-feature.
103+
Recoloring icons will not work with PNG or other raster formats.
104+
</Aside>
105+
106+
Per default, SVG icons will be displayed in their original color.
107+
However, especially for monochrome icons, it is often desirable to change the color of the icons based on the menu theme.
108+
109+
The basic idea is to set the `fill` or `stroke` attributes of the shapes in your SVG files to `currentColor`.
110+
Usually, SVG files have a fixed color set for these (like `fill="red"` or `stroke="#ff6677"`), however, the special variable `currentColor` can be used instead.
111+
112+
**This means, you will need to edit your SVG files and change the `fill` attribute of the shapes to `currentColor`.**
113+
Here are some examples, the corresponding SVG code is shown in the tabs below the images.
114+
115+
Image | Name | Explanation
116+
--- | --- | ---
117+
<div style="position: absolute"><Fragment set:html={exampleSVGFixed} /></div> | red.svg | This is how most SVG files will look like by default. The `fill` attribute is set to a fixed color (in this case, red). This means the icon will always be red, regardless of the menu theme. You can change the color theme of this website to see that the icon does not change its color.
118+
<div style="position: absolute"><Fragment set:html={exampleSVGCurrent} /></div> | current.svg | If you use `currentColor` as the value for the `fill` attribute, the icon will ba adaptive! **Try changing the color theme of this website!** The icon will switch between light and dark colors automatically.
119+
<div style="position: absolute"><Fragment set:html={exampleSVGMixed} /></div> | mixed.svg | You can also mix adaptive and fixed colors in your SVG files. In this example, the fill color will adapt to the menu theme, while the stroke color will always be red.
120+
121+
<Tabs>
122+
<TabItem label="red.svg">
123+
```xml {7}
124+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
125+
<svg
126+
width="150" height="150" viewBox="0 0 256 256" version="1.1"
127+
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
128+
<g>
129+
<path
130+
style="fill:red"
131+
d="M 93.175781 21.878906 A 37.714935 37.714935 0 0 0 56.533203 48.351562 A 37.714935 37.714935 0 0 0 81.296875 95.589844 A 37.714935 37.714935 0 0 0 128.53711 70.826172 A 37.714935 37.714935 0 0 0 103.77344 23.585938 A 37.714935 37.714935 0 0 0 93.175781 21.878906 z M 182.66016 35.625 A 37.714935 37.714935 0 0 0 144.94531 73.339844 A 37.714935 37.714935 0 0 0 182.66016 111.05469 A 37.714935 37.714935 0 0 0 220.375 73.339844 A 37.714935 37.714935 0 0 0 182.66016 35.625 z M 54.578125 101.62695 A 37.714935 37.714935 0 0 0 21.8125 116.89844 A 37.714935 37.714935 0 0 0 29.8125 169.63281 A 37.714935 37.714935 0 0 0 82.544922 161.63281 A 37.714935 37.714935 0 0 0 74.546875 108.90039 A 37.714935 37.714935 0 0 0 54.578125 101.62695 z M 195.74805 125.76172 A 37.714935 37.714935 0 0 0 185.15039 127.46875 A 37.714935 37.714935 0 0 0 160.38477 174.70703 A 37.714935 37.714935 0 0 0 207.62305 199.47266 A 37.714935 37.714935 0 0 0 232.38867 152.23438 A 37.714935 37.714935 0 0 0 195.74805 125.76172 z M 114.24609 166.14648 A 37.714935 37.714935 0 0 0 94.267578 173.38867 A 37.714935 37.714935 0 0 0 86.193359 226.11133 A 37.714935 37.714935 0 0 0 138.91602 234.18555 A 37.714935 37.714935 0 0 0 146.99023 181.46289 A 37.714935 37.714935 0 0 0 114.24609 166.14648 z "
132+
/>
133+
</g>
134+
</svg>
135+
```
136+
</TabItem>
137+
138+
<TabItem label="current.svg">
139+
```xml {7}
140+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
141+
<svg
142+
width="150" height="150" viewBox="0 0 256 256" version="1.1"
143+
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
144+
<g>
145+
<path
146+
style="fill:currentColor"
147+
d="M 93.175781 21.878906 A 37.714935 37.714935 0 0 0 56.533203 48.351562 A 37.714935 37.714935 0 0 0 81.296875 95.589844 A 37.714935 37.714935 0 0 0 128.53711 70.826172 A 37.714935 37.714935 0 0 0 103.77344 23.585938 A 37.714935 37.714935 0 0 0 93.175781 21.878906 z M 182.66016 35.625 A 37.714935 37.714935 0 0 0 144.94531 73.339844 A 37.714935 37.714935 0 0 0 182.66016 111.05469 A 37.714935 37.714935 0 0 0 220.375 73.339844 A 37.714935 37.714935 0 0 0 182.66016 35.625 z M 54.578125 101.62695 A 37.714935 37.714935 0 0 0 21.8125 116.89844 A 37.714935 37.714935 0 0 0 29.8125 169.63281 A 37.714935 37.714935 0 0 0 82.544922 161.63281 A 37.714935 37.714935 0 0 0 74.546875 108.90039 A 37.714935 37.714935 0 0 0 54.578125 101.62695 z M 195.74805 125.76172 A 37.714935 37.714935 0 0 0 185.15039 127.46875 A 37.714935 37.714935 0 0 0 160.38477 174.70703 A 37.714935 37.714935 0 0 0 207.62305 199.47266 A 37.714935 37.714935 0 0 0 232.38867 152.23438 A 37.714935 37.714935 0 0 0 195.74805 125.76172 z M 114.24609 166.14648 A 37.714935 37.714935 0 0 0 94.267578 173.38867 A 37.714935 37.714935 0 0 0 86.193359 226.11133 A 37.714935 37.714935 0 0 0 138.91602 234.18555 A 37.714935 37.714935 0 0 0 146.99023 181.46289 A 37.714935 37.714935 0 0 0 114.24609 166.14648 z "
148+
/>
149+
</g>
150+
</svg>
151+
```
152+
</TabItem>
153+
154+
<TabItem label="mixed.svg">
155+
```xml {7}
156+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
157+
<svg
158+
width="150" height="150" viewBox="0 0 256 256" version="1.1"
159+
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
160+
<g>
161+
<path
162+
style="fill:currentColor;stroke:red;stroke-width:10px"
163+
d="M 93.175781 21.878906 A 37.714935 37.714935 0 0 0 56.533203 48.351562 A 37.714935 37.714935 0 0 0 81.296875 95.589844 A 37.714935 37.714935 0 0 0 128.53711 70.826172 A 37.714935 37.714935 0 0 0 103.77344 23.585938 A 37.714935 37.714935 0 0 0 93.175781 21.878906 z M 182.66016 35.625 A 37.714935 37.714935 0 0 0 144.94531 73.339844 A 37.714935 37.714935 0 0 0 182.66016 111.05469 A 37.714935 37.714935 0 0 0 220.375 73.339844 A 37.714935 37.714935 0 0 0 182.66016 35.625 z M 54.578125 101.62695 A 37.714935 37.714935 0 0 0 21.8125 116.89844 A 37.714935 37.714935 0 0 0 29.8125 169.63281 A 37.714935 37.714935 0 0 0 82.544922 161.63281 A 37.714935 37.714935 0 0 0 74.546875 108.90039 A 37.714935 37.714935 0 0 0 54.578125 101.62695 z M 195.74805 125.76172 A 37.714935 37.714935 0 0 0 185.15039 127.46875 A 37.714935 37.714935 0 0 0 160.38477 174.70703 A 37.714935 37.714935 0 0 0 207.62305 199.47266 A 37.714935 37.714935 0 0 0 232.38867 152.23438 A 37.714935 37.714935 0 0 0 195.74805 125.76172 z M 114.24609 166.14648 A 37.714935 37.714935 0 0 0 94.267578 173.38867 A 37.714935 37.714935 0 0 0 86.193359 226.11133 A 37.714935 37.714935 0 0 0 138.91602 234.18555 A 37.714935 37.714935 0 0 0 146.99023 181.46289 A 37.714935 37.714935 0 0 0 114.24609 166.14648 z "
164+
/>
165+
</g>
166+
</svg>
167+
```
168+
</TabItem>
169+
170+
</Tabs>
171+
172+
## <Icon name="solar:lightbulb-minimalistic-bold-duotone" class="inline-icon" /> Suggested Icon Sets
90173

91174
There are many great icon sets available on the internet. Here are some which you could try:
92175
* [Numix Circle](https://github.com/numixproject/numix-icon-theme-circle): Just use the files from the `Numix-Circle/48/apps` directory.
93176
* [Papirus](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme): Here you could use the content from the `Papirus/64x64` directory.
94177
* [Tela](https://github.com/vinceliuice/Tela-icon-theme): Here you find the icons in the `src/scalable` directory.
95178
* [Pixelitos](https://github.com/ItzSelenux/pixelitos-icon-theme): Here you find the icons in the `16` directory.
96179

97-
<br/>
98180
<br/>
99181

100182
<Aside type="note" title="Have you discovered another cool icon set?">

0 commit comments

Comments
 (0)