From ec1c8210a19589ffba0b6836de6dbbb5bca7db64 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 27 Apr 2020 10:20:07 +0200
Subject: [PATCH] SVG Icon grows to container size

---
 client/common/Icon.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/common/Icon.jsx b/client/common/Icon.jsx
index 70638f90..05a695da 100644
--- a/client/common/Icon.jsx
+++ b/client/common/Icon.jsx
@@ -3,6 +3,7 @@ import InlineSVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import React from 'react';
 import lodash from 'lodash';
+import styled from 'styled-components';
 
 const icons = {
   sortArrowUp: require('../images/sort-arrow-up.svg'),
@@ -24,10 +25,16 @@ const names = lodash.mapValues(icons, (value, key) => key);
 
 export const ValidIconNameType = PropTypes.oneOf(Object.keys(names));
 
+const StyledInlineSVG = styled(InlineSVG)`
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
 
 function Icon({ name, ...props }) {
   return (
-    <InlineSVG src={icons[name]} {...props} />
+    <StyledInlineSVG src={icons[name]} {...props} />
   );
 }