Responsive inline SVG icons -- e.g. ExternalLink icon

components/kitofparts.js

@@ -68,7 +68,7 @@ export default function Kitofparts() {
       {/* Show black background style */}
       <div className="pad bg-black">
         <div className="wrap padr">
-          <div className="wrap-text pad">
+          <div className="wrap-text">
             <H1>{text}</H1>
           </div>
         </div>
@@ -81,7 +81,7 @@ export default function Kitofparts() {
       {/* Show pink background style */}
       <div className="pad bg-pink">
         <div className="wrap padr">
-          <div className="wrap-text pad">
+          <div className="wrap-text">
             <H3>{text}</H3>
           </div>
         </div>
@@ -94,7 +94,7 @@ export default function Kitofparts() {
       {/* Show grey background style */}
       <div className="pad bg-grey">
         <div className="wrap padr">
-          <div className="wrap-text pad">
+          <div className="wrap-text">
             <H5>{text}</H5>
           </div>
         </div>

styles/_kitofparts.scss

@@ -47,6 +47,6 @@
 }
 
 .padr {
-  padding-left: 64px;
-  padding-right: 64px;
+  padding-left: 4.4444444444vw;
+  padding-right: 4.4444444444vw;
 }

styles/_typography.scss

@@ -20,6 +20,33 @@ a {
   svg:first-child {
     margin-right: 8px;
   }
+  
+  /*
+   * Using React Feather
+   * https://github.com/feathericons/react-feather
+   * Default size is 24x24 for SVG icons
+   * Sizing can be passed in component JS as in:
+   * <Icon size={18} name="GitHub" />
+   * However the inline, in-text SVG icons need to be
+   *    responsive with the text scaling so some CSS
+   *    can achieve the desired result in this case:
+   *    e.g. <span>text</span><Icon name="ExternalLink" />
+   *
+   */
+  svg {
+    @media (max-width: $width-tablet-1) {
+      width: 20px;
+      height: auto;
+    }
+
+    @media (max-width: $width-tablet-2) {
+      width: 18px;
+    }
+
+    @media (max-width: $width-mobile) {
+      width: 16px;
+    }
+  }
 }
 
 strong {