From f996b111b953e87e4ee44a10889a38b1f372a78e Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 17 Mar 2026 21:05:45 -0700 Subject: [PATCH] add new external brand icons --- src/shared/assets.d.ts | 9 ++ src/shared/components/icon/icon.module.css | 13 ++ src/shared/components/icon/icon.tsx | 96 +++++++++++- .../components/icon/lastfm_logo_icon.svg | 143 ++++++++++++++++++ .../icon/listenbrainz_logo_icon.png | Bin 0 -> 789 bytes .../icon/listenbrainz_logo_icon.svg | 1 + .../components/icon/musicbrainz_logo_icon.svg | 1 + .../components/icon/qobuz_logo_icon.png | Bin 0 -> 626 bytes .../components/icon/spotify_logo_icon.svg | 5 + 9 files changed, 262 insertions(+), 6 deletions(-) create mode 100644 src/shared/assets.d.ts create mode 100644 src/shared/components/icon/lastfm_logo_icon.svg create mode 100644 src/shared/components/icon/listenbrainz_logo_icon.png create mode 100644 src/shared/components/icon/listenbrainz_logo_icon.svg create mode 100644 src/shared/components/icon/musicbrainz_logo_icon.svg create mode 100644 src/shared/components/icon/qobuz_logo_icon.png create mode 100644 src/shared/components/icon/spotify_logo_icon.svg diff --git a/src/shared/assets.d.ts b/src/shared/assets.d.ts new file mode 100644 index 000000000..b4e779c8d --- /dev/null +++ b/src/shared/assets.d.ts @@ -0,0 +1,9 @@ +declare module '*.png' { + const content: string; + export default content; +} + +declare module '*.svg' { + const content: string; + export default content; +} diff --git a/src/shared/components/icon/icon.module.css b/src/shared/components/icon/icon.module.css index 6a264cceb..c1741a1a0 100644 --- a/src/shared/components/icon/icon.module.css +++ b/src/shared/components/icon/icon.module.css @@ -34,6 +34,19 @@ font-size: var(--theme-font-size-5xl); } +img.size-xs, +img.size-sm, +img.size-md, +img.size-lg, +img.size-xl, +img.size-2xl, +img.size-3xl, +img.size-4xl, +img.size-5xl { + width: 1em; + height: 1em; +} + .color-default { color: var(--theme-colors-foreground); } diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx index 335c6763b..a8a8daaee 100644 --- a/src/shared/components/icon/icon.tsx +++ b/src/shared/components/icon/icon.tsx @@ -1,8 +1,14 @@ import clsx from 'clsx'; import { motion } from 'motion/react'; -import { type ComponentType, forwardRef, memo, useMemo } from 'react'; +import { + type ComponentType, + type CSSProperties, + forwardRef, + ImgHTMLAttributes, + memo, + useMemo, +} from 'react'; import { IconBaseProps } from 'react-icons'; -import { FaLastfmSquare } from 'react-icons/fa'; import { LuAlignCenter, LuAlignLeft, @@ -127,12 +133,88 @@ import { import { MdOutlineVisibility, MdOutlineVisibilityOff } from 'react-icons/md'; import { PiMouseLeftClickFill, PiMouseRightClickFill } from 'react-icons/pi'; import { RiPlayListAddLine, RiRepeat2Line, RiRepeatOneLine } from 'react-icons/ri'; -import { SiMusicbrainz, SiSpotify } from 'react-icons/si'; import styles from './icon.module.css'; +import lastfmLogoIcon from './lastfm_logo_icon.svg'; +import listenbrainzLogoIcon from './listenbrainz_logo_icon.svg'; +import musicbrainzLogoIcon from './musicbrainz_logo_icon.svg'; +import qobuzLogoIcon from './qobuz_logo_icon.png'; +import spotifyLogoIcon from './spotify_logo_icon.svg'; export type AppIconSelection = keyof typeof AppIcon; +type LogoImgProps = ImgHTMLAttributes & { size?: number | string }; + +function logoImgStyle(size: number | string | undefined): CSSProperties | undefined { + if (size === undefined) return undefined; + const dim = typeof size === 'number' ? `${size}px` : size; + return { height: dim, width: dim }; +} + +const ListenBrainzLogoIcon = forwardRef( + ({ className, size, style, ...props }, ref) => ( + ListenBrainz + ), +); + +const SpotifyLogoIcon = forwardRef( + ({ className, size, style, ...props }, ref) => ( + Spotify + ), +); + +const MusicBrainzLogoIcon = forwardRef( + ({ className, size, style, ...props }, ref) => ( + MusicBrainz + ), +); +const QobuzLogoIcon = forwardRef( + ({ className, size, style, ...props }, ref) => ( + Qobuz + ), +); + +const LastfmLogoIcon = forwardRef( + ({ className, size, style, ...props }, ref) => ( + Last.fm + ), +); + export const AppIcon = { add: LuPlus, album: LuDisc3, @@ -156,9 +238,11 @@ export const AppIcon = { arrowUpToLine: LuArrowUpToLine, artist: LuUserPen, brandGitHub: LuGithub, - brandLastfm: FaLastfmSquare, - brandMusicBrainz: SiMusicbrainz, - brandSpotify: SiSpotify, + brandLastfm: LastfmLogoIcon, + brandListenBrainz: ListenBrainzLogoIcon, + brandMusicBrainz: MusicBrainzLogoIcon, + brandQobuz: QobuzLogoIcon, + brandSpotify: SpotifyLogoIcon, cache: LuCloudDownload, check: LuCheck, clipboardCopy: LuClipboardCopy, diff --git a/src/shared/components/icon/lastfm_logo_icon.svg b/src/shared/components/icon/lastfm_logo_icon.svg new file mode 100644 index 000000000..ae21acb6e --- /dev/null +++ b/src/shared/components/icon/lastfm_logo_icon.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/components/icon/listenbrainz_logo_icon.png b/src/shared/components/icon/listenbrainz_logo_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..182875a7f4863a9209360959df3d39a8d6aed9fb GIT binary patch literal 789 zcmV+w1M2*VP)e)KNC zC66$|3-Kr!{3Lo?5TyhlrgN>PukbGgr%^xpbd=_6OvKU2q&Xd3j0-9<3>Z-``wgA_^nKK-tA8yBUTt?NBdP!8sAlPcFaaB!o`piYmJwL?1DnPy>g>N(!b$ z?`iKsqC9mn7fwgX3~!oXI6yRFB38m{JTk1_9Dh5*h)$@o`;Bggw;YlI=3*sSy<0B$ z9D+G@Kqs>SLPPAMD-2_@z*g)poOd}MbTSjvKH6^IwsaS(usa@fvNr14w=M2s3iIQE z5sjeiVwBws!ufecR$gtfc;UV1!1M zolX0;#h+LSR_~wVK_^qZ7$sg3R`?dHIJvyhdGtdO#5xkh90_7l1TjZ~m=rx31U(NF-L-!6hX|9ASOi+b0mmK5yTwX6Wd%$ERgj%rsDhuu{-EY_AVtV zaE+8AbAsVBgc$zB_#O{+jg-mgU)9jF(XqO}zbpWfurq9S \ No newline at end of file diff --git a/src/shared/components/icon/musicbrainz_logo_icon.svg b/src/shared/components/icon/musicbrainz_logo_icon.svg new file mode 100644 index 000000000..44fe7db59 --- /dev/null +++ b/src/shared/components/icon/musicbrainz_logo_icon.svg @@ -0,0 +1 @@ +MusicBrainz_logo \ No newline at end of file diff --git a/src/shared/components/icon/qobuz_logo_icon.png b/src/shared/components/icon/qobuz_logo_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4ef8c4233e3c45fa44427ca93b476379db6706e7 GIT binary patch literal 626 zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s3?yAI>n{URjR8I(uI>dsY;0^m9s~f{qN1W) zTp*3e;t*LK9UUO!|Ns961_s~0eRFqrU%!6+l`B{7-Mg2QlVf9J6B85j_wV0l&z>nO zE7#T4wYRq~TeeI}N~)}^EIB!O)~s3Y-n~10`gDJP|IVE|j~qD?7#P@FJ^c^RP=S&l zzhH)*o3D<i_?l&o|garq@mQxMO;*&#`}Rigv}V-~E^Wce=gi6=(IQCQcQz| zLr7WmxzM!x{dTpRH!Pf6)6rP`fV*~j=V319q)5i38SlQYd|;qBE$O?Jze1QPhq2D4 zZ0^Mer_4CoDcs7nS*q%vPSj1)#Sd(II=){x#M~*yP`K8eyZ0UA0_Q7csa$7Hw$8|| z+Ocjev*f9cjV-$!vVR4xT=)GopK-#QJ4r8VA7+KjlX9s`WbZt6SXwkh$?u->UR&!s zAD`{1T6Rlw=bghsw=b)kycM4kQTg4mccJt2-ZwiVg)eRP)#x|pR5g9{Ky$j6uOY|o zX%@}7O;P)hR+ailmpIV@CbI=64v#zWa}IFHSqeY&X5q;!Uh ze^%C~d3OZPT=HGpaNw0|(%~H6-?6ji^{>CLsPv6HrPsiv@7OVGP^$2B^>bP0l+XkK DsG + + + + \ No newline at end of file