jandieman/searxng
2
0
Fork 0
mirror of https://github.com/searxng/searxng.git synced 2026-09-23 06:36:12 +00:00
Code Issues Projects Releases Wiki Activity

[feat] categories: add icons for remaining category tabs (#6759)

Browse Source 
Icons are provided for the main categories known to us.

The distinction between CATEGORY_GROUPS and CATEGORY_NAMES is abandoned in favor
of the latter.

HINT: we need single-color icons; transparent background and the color must be
`currentColor` so that the icons can be used in light/dark themes.

The following SVGs from the ionicons had to be revised (use ``currentColor``).

- client/simple/src/svg/ionicons/logo-rss.svg
- client/simple/src/svg/ionicons/radio-outline.svg
- client/simple/src/svg/ionicons/color-palette-outline.svg

For the following categories, I did not find any usable icons in Ionicons; new
SVGs were created for these categories.

- onions: client/simple/src/svg/ionicons/tor-browser.svg
- lyrics: client/simple/src/svg/ionicons/song-lyric-music.svg [1]
- packages: client/simple/src/svg/ionicons/package_2.svg [1]

[1] Based on Google's Material icons: https://fonts.google.com/icons

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Bnyro
2026-09-19 12:51:54 +02:00
parent 49064747a2
commit 52284fd320
12 changed files with 258 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/simple/src/svg/ionicons/color-palette-outline.svg Normal file
View File

@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
<path
d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7Z"
fill="none"
stroke="currentColor"
stroke-miterlimit="10"
stroke-width="32px"
/>
<circle
fill="currentColor"
cx="144"
cy="208"
r="32"
/>
<circle
fill="currentColor"
cx="152"
cy="311"
r="32"
/>
<circle
fill="currentColor"
cx="224"
cy="144"
r="32"
/>
<circle
fill="currentColor"
cx="256"
cy="367"
r="48"
/>
<circle
fill="currentColor"
cx="328"
cy="144"
r="32"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

33
client/simple/src/svg/ionicons/information-circle-outline.svg
View File

@@ -1,6 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/>
<path d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="1"/>
<path
fill="none"
stroke="currentColor"
stroke-miterlimit="10"
stroke-width="32"
d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
d="M220 220h32v116"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="32" d="M208 340h88"
/>
<path
d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z"
fill="currentColor"
stroke="currentColor"
stroke-miterlimit="10"
stroke-width="1"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 852 B

17
client/simple/src/svg/ionicons/logo-rss.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
<path
fill="currentColor"
stroke="currentColor"
d="M108.56 342.78a60.34 60.34 0 1 0 60.56 60.44 60.63 60.63 0 0 0-60.56-60.44"
/>
<path
fill="currentColor"
stroke="currentColor"
d="M48 186.67v86.55c52 0 101.94 15.39 138.67 52.11s52 86.56 52 138.67h86.66c0-151.56-125.66-277.33-277.33-277.33"
/>
<path
fill="currentColor"
stroke="currentColor"
d="M48 48v86.56c185.25 0 329.22 144.08 329.22 329.44H464C464 234.66 277.67 48 48 48"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 625 B

33
client/simple/src/svg/ionicons/newspaper-outline.svg
View File

@@ -1,6 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
<path d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
<path d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
<path d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1" />
<path
fill="none"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="32"
d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328"
/>
<path
fill="none"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="32"
d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192"
/>
<path
fill="currentColor"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="1"
d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 787 B

After

Width:  |  Height:  |  Size: 988 B

7
client/simple/src/svg/ionicons/package_2.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
fill="currentColor"
>
<path d="M450-154v-309L180-619v309l270 156Zm60 0 270-156v-310L510-463v309Zm-60 69L150-258q-14-8-22-22t-8-30v-340q0-16 8-30t22-22l300-173q14-8 30-8t30 8l300 173q14 8 22 22t8 30v340q0 16-8 30t-22 22L510-85q-14 8-30 8t-30-8Zm194-525 102-59-266-154-102 59 266 154Zm-164 96 104-61-267-154-104 60 267 155Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 415 B

23
client/simple/src/svg/ionicons/radio-outline.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
<circle
fill="currentColor"
cx="256"
cy="256.02"
r="32"
/>
<path
d="M184.25 192.25a96 96 0 0 0 0 127.52M327.77 319.77a96 96 0 0 0 0-127.52M133.28 141.28a168 168 0 0 0 0 229.44M378.72 370.72a168 168 0 0 0 0-229.44" fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
/>
<path
d="M435 416a240.34 240.34 0 0 0 0-320M77 96a240.34 240.34 0 0 0 0 320"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 741 B

11
client/simple/src/svg/ionicons/song-lyric-music.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg
height="512"
viewBox="0 -960 20480 20480"
width="512"
version="1.1"
>
<path
d="M 19480,18100 V 2980 q 0,-693 -493.5,-1186.5 Q 18493,1300 17800,1300 H 8560 q -693,0 -1186.5,493.5 Q 6880,2287 6880,2980 v 357 q 504,231 924,567 420,336 756,756 V 2980 h 9240 v 11067 l -987,-987 H 8560 V 9700 q -336,420 -756,756 -420,336 -924,567 v 2037 q 0,693 493.5,1186.5 Q 7867,14740 8560,14740 h 7560 z M 16120,11380 H 12760 V 9700 h 3360 z M 5200,9700 q 1050,0 1785,-735 735,-735 735,-1785 0,-1050 -735,-1785 -735,-735 -1785,-735 -231,0 -441,42 -210,42 -399,105 V 460 H 1000 v 1680 h 1680 v 5040 q 0,1050 735,1785 735,735 1785,735 z M 16120,8860 H 10240 V 7180 h 5880 z m 0,-2520 H 10240 V 4660 h 5880 z m 1680,6720 V 2980 Z"
stroke="currentColor"
fill="currentColor" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 808 B

26
client/simple/src/svg/ionicons/tor-browser.svg Normal file
View File

@@ -0,0 +1,26 @@
<svg
viewBox="0 0 512 512"
fill="none"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="34.6274"
d="M 256,469.53574 C 373.93232,469.53574 469.53574,373.93232 469.53574,256 469.53574,138.06479 373.93232,42.464261 256,42.464261 138.06479,42.464261 42.464263,138.06479 42.464263,256 42.464263,373.93232 138.06479,469.53574 256,469.53574 Z"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="34.6274"
d="m 256,111.7191 a 144.28091,144.28091 0 1 1 0,288.56181"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="34.6274"
d="m 256,180.97393 a 75.034727,75.034727 0 0 1 69.31543,46.31417 75.060698,75.060698 0 0 1 0,57.4238 75.092439,75.092439 0 0 1 -16.26334,24.34019 A 75.069355,75.069355 0 0 1 256,331.02607"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 979 B

16
client/simple/theme_icons.ts
View File

@@ -39,14 +39,17 @@ const simple_icons: IconSet[] = [
alert: "alert-outline.svg",
appstore: "apps-outline.svg",
book: "book-outline.svg",
camera: "camera-outline.svg",
close: "close-outline.svg",
download: "download-outline.svg",
"ellipsis-vertical": "ellipsis-vertical-outline.svg",
"file-tray-full": "file-tray-full-outline.svg",
"file-tray-stacked": "file-tray-stacked-outline.svg",
film: "film-outline.svg",
globe: "globe-outline.svg",
heart: "heart-outline.svg",
image: "image-outline.svg",
language: "language-outline.svg",
layers: "layers-outline.svg",
leecher: "arrow-down.svg",
location: "location-outline.svg",
@@ -58,13 +61,14 @@ const simple_icons: IconSet[] = [
"navigate-up": "chevron-up-outline.svg",
people: "people-outline.svg",
play: "play-outline.svg",
radio: "radio-outline.svg",
rainy: "rainy-outline.svg",
save: "save-outline.svg",
school: "school-outline.svg",
search: "search-outline.svg",
seeder: "swap-vertical.svg",
settings: "settings-outline.svg",
tv: "tv-outline.svg"
tv: "tv-outline.svg",
videocam: "videocam-outline.svg"
},
svgo_opts: sxng_icon_opts
},
@@ -75,7 +79,13 @@ const simple_icons: IconSet[] = [
base: resolve(HERE, "src/svg/ionicons"),
set: {
"information-circle": "information-circle-outline.svg",
newspaper: "newspaper-outline.svg"
lyrics: "song-lyric-music.svg",
newspaper: "newspaper-outline.svg",
palette: "color-palette-outline.svg",
package: "package_2.svg",
radio: "radio-outline.svg",
rss: "logo-rss.svg",
tor: "tor-browser.svg"
},
svgo_opts: sxng_icon_opts
}

13
client/simple/tools/jinja_svg_catalog.html.edge
View File

@@ -7,9 +7,18 @@ for the backend. Example output of this EDGE template:
--}}
{#
Catalog of SVG symbols that can be inserted into the HTML output of a Jinja
template. This file from:
template. This file is generated by:
make static.build.commit
from template:
client/simple/tools/jinja_svg_catalog.html.edge
To modify the icon set, edit the script:
client/simple/theme_icons.ts
client/simple/tools/icon_catalog.edge.html
#}
{%-