ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add browser logo icons for all detected browsers

Browse Source 
Use real browser logos from alrra/browser-logos (SVG where available,
PNG fallback for archived browsers). Replaces the generic globe icon
with actual Chrome, Firefox, Safari, Edge, Opera, Brave, Vivaldi, Arc,
Samsung Internet, UC Browser, Yandex, Waterfox, Pale Moon, DuckDuckGo,
Maxthon, Silk, Puffin, Tor, and Opera Mini logos.
This commit is contained in:
Usman Baig
2026-03-19 11:09:16 +01:00
parent e464b87471
commit a7ac2cb9d7
21 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lib/utils/icons.tsx
View File

@@ -32,9 +32,34 @@ import {
*/
export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
const BROWSER_ICON_MAP: Record<string, { file: string; ext: 'svg' | 'png' }> = {
'chrome': { file: 'chrome', ext: 'svg' },
'firefox': { file: 'firefox', ext: 'svg' },
'safari': { file: 'safari', ext: 'svg' },
'edge': { file: 'edge', ext: 'svg' },
'opera': { file: 'opera', ext: 'svg' },
'brave': { file: 'brave', ext: 'svg' },
'vivaldi': { file: 'vivaldi', ext: 'svg' },
'samsung internet': { file: 'samsung-internet', ext: 'svg' },
'uc browser': { file: 'uc-browser', ext: 'svg' },
'yandex browser': { file: 'yandex', ext: 'png' },
'waterfox': { file: 'waterfox', ext: 'png' },
'pale moon': { file: 'pale-moon', ext: 'png' },
'duckduckgo': { file: 'duckduckgo', ext: 'png' },
'maxthon': { file: 'maxthon', ext: 'png' },
'silk': { file: 'silk', ext: 'png' },
'puffin': { file: 'puffin', ext: 'png' },
'arc': { file: 'arc', ext: 'png' },
'tor': { file: 'tor', ext: 'png' },
'opera mini': { file: 'opera-mini', ext: 'png' },
}
export function getBrowserIcon(browserName: string) {
if (!browserName) return <Globe className="text-neutral-400" />
return <Globe className="text-neutral-500" />
const entry = BROWSER_ICON_MAP[browserName.toLowerCase()]
if (!entry) return <Globe className="text-neutral-500" />
const src = `/icons/browsers/${entry.file}.${entry.ext}`
return <img src={src} alt={browserName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
}
export function getOSIcon(osName: string) {