Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2025-01-13 00:33:52 +08:00
Code Issues Projects Releases Wiki Activity

feat: support to set icon color to the theme color when proxy icon starts with data:image/svg+xml (#1166)

Browse Source 
* feat: support to set icon color to the theme color when proxy icon starts with `data:image/svg+xml`

* fix: errors related to set icon color to the theme color
1. remove incorrect CSS properties
2. rearrange these properties
3. use `fallback` property in `Show` component insead of using multiple  `Show` components
4. Add reference link above  `encodeSvg` function

* fix:replace optional attributes with non-null assertions

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: Michelle Rodriguez <2316892579@qq.com>

---------

Signed-off-by: Michelle Rodriguez <2316892579@qq.com>
Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
This commit is contained in:
Michelle Rodriguez 2024-11-23 20:53:28 +08:00 committed by GitHub
parent 676a458961
commit 29ed55cf50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Proxies.tsx
View File

@ -92,7 +92,26 @@ export default () => {
e.stopPropagation()
void proxyGroupLatencyTest(groupName)
}
/**
* transform an SVG into a data URI
* @see https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
*/
const encodeSvg = (svg: string) => {
return svg
.replace(
'<svg',
~svg.indexOf('xmlns')
? '<svg'
: '<svg xmlns="http://www.w3.org/2000/svg"',
)
.replace(/"/g, "'")
.replace(/%/g, '%25')
.replace(/#/g, '%23')
.replace(/\{/g, '%7B')
.replace(/\}/g, '%7D')
.replace(/</g, '%3C')
.replace(/>/g, '%3E')
}
const onProxyProviderLatencyTestClick = (
e: MouseEvent,
providerName: string,
@ -193,6 +212,11 @@ export default () => {
<div class="flex items-center justify-between pr-8">
<div class="flex items-center">
<Show when={proxyGroup.icon}>
<Show
when={proxyGroup.icon!.startsWith(
'data:image/svg+xml',
)}
fallback={
<img
src={proxyGroup.icon}
style={{
@ -200,6 +224,21 @@ export default () => {
'margin-right': `${iconMarginRight()}px`,
}}
/>
}
>
<div
style={{
height: `${iconHeight()}px`,
width: `${iconHeight()}px`,
color:
'oklch(var(--p) / var(--tw-bg-opacity))',
'background-color': 'currentColor',
'margin-right': `${iconMarginRight()}px`,
'mask-image': `url("${encodeSvg(proxyGroup.icon!)}")`,
'mask-size': '100% 100%',
}}
/>
</Show>
</Show>
<span>{proxyGroup.name}</span>
<div class="badge badge-sm ml-2">