Thanks, iOS: Set width and height on RuneSVG

Author: aryanpingle

src/components/RuneSVG/index.css

@@ -1,6 +1,6 @@
 svg.runic-svg {
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 /* Add styles to the interactive layer */

src/components/RuneSVG/index.tsx

@@ -22,6 +22,8 @@ import { sanitizeBitmask } from "src/rune";
 export interface Props extends Partial<StateInProps> {
     interactive: boolean;
     phoneticText: string;
+
+    svgProps?: preact.JSX.SVGAttributes<any>;
 }
 
 interface StateInProps {
@@ -328,9 +330,12 @@ export class RuneSVG extends Component<Props, State> {
                 class="runic-svg"
                 preserveAspectRatio="xMidYMid meet"
                 viewBox={viewBox}
+                width={viewBoxWidth}
+                height={viewBoxHeight}
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
+                {...props.svgProps}
             >
                 {/* Simple optimization, may be removed if troublesome */}
                 {state.runeGuideColor !== "transparent" && (

src/components/SocialMediaCard/index.tsx

@@ -42,6 +42,9 @@ export class SocialMediaCard extends Component<SocialMediaCardProps, State> {
                         interactive={false}
                         runeColor=""
                         runeGuideColor=""
+                        svgProps={{
+                            preserveAspectRatio: "xMinYMin meet"
+                        }}
                     />
                 </div>
                 <div className="sm-card__interactions">