Added svg support

src/HUD/MatchBar/TeamLogo.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import { Team } from 'csgogsi-socket';
 import * as I from '../../api/interfaces';
-
+import { apiUrl } from './../../api/api';
 
 export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> {
   render(){
-    if(!this.props.team) return null;
+    const { team } = this.props;
+    if(!team) return null;
+    let id = '';
+    const { logo } = team;
+    if('_id' in team){
+      id = team._id;
+    } else if('id' in team && team.id){
+      id = team.id;
+    }
     return (
       <div className={`logo`}>
-          { this.props.team.logo ? <img src={`data:image/jpeg;base64,${this.props.team.logo}`} width={this.props.width} height={this.props.height} alt={'Team logo'} /> : ''}
+          { logo && id ? <img src={`${apiUrl}api/teams/logo/${id}`} width={this.props.width} height={this.props.height} alt={'Team logo'} /> : ''}
       </div>
     );
   }

src/HUD/MatchBar/TeamScore.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import * as I from "csgogsi-socket";
 import WinIndicator from "./WinIndicator";
 import { Timer } from "./MatchBar";
+import TeamLogo from './TeamLogo';
 import PlantDefuse from "../Timers/PlantDefuse"
 
 interface IProps {
@@ -18,7 +19,7 @@ export default class TeamScore extends React.Component<IProps> {
       <>
         <div className={`team ${orientation} ${team.side}`}>
           <div className="team-name">{team.name}</div>
-          <div className="logo">{team.logo ? <img src={`data:image/jpeg;base64,${team.logo}`} alt={'Team logo'} /> : ""}</div>
+          <TeamLogo team={team} />
           <div className="round-thingy"><div className="inner"></div></div>
         </div>
         <PlantDefuse timer={timer} side={orientation} />

src/HUD/Players/Observed.tsx

@@ -57,8 +57,8 @@ export default class Observed extends React.Component<{ player: Player | null, v
 		return (
 			<div className={`observed ${player.team.side}`}>
 				<div className="main_row">
-					<Avatar steamid={player.steamid} height={140} />
-					<TeamLogo team={player.team} height={35} />
+					<Avatar steamid={player.steamid} height={140} width={140} />
+					<TeamLogo team={player.team} height={35} width={35} />
 					<div className="username_container">
 						<div className="username">{player.name}</div>
 						<div className="real_name">{player.realName}</div>

src/HUD/Players/Player.tsx

@@ -22,7 +22,7 @@ export default class PlayerBox extends React.Component<IProps> {
     return (
       <div className={`player ${player.state.health === 0 ? "dead" : ""} ${this.props.isObserved ? 'active' : ''}`}>
         <div className="player_data">
-          <Avatar steamid={player.steamid} height={57} showSkull={false}/>
+          <Avatar steamid={player.steamid} height={57} width={57} showSkull={false}/>
           <div className="dead-stats">
             <div className="labels">
               <div className="stat-label">K</div>

src/HUD/Styles/match.css

@@ -33,6 +33,7 @@
 }
 .map_series_container .veto_container div img {
     max-height:30px;
+    max-width: 30px;
 }
 .map_series_container .veto_container .veto_picker, .map_series_container .veto_container .veto_winner {
     width: 77px;