update SVG paths to use *.mini.svg

Author: fturmel

src/components/CodeExampleList.js

@@ -5,9 +5,9 @@ import Image from './Image';
 
 import * as css from './CodeExampleList.module.css';
 
-import NodeIcon from '../images/node-icon.svg';
-import P5Icon from '../images/p5js-icon.svg';
-import ProcessingLogo from '../images/processing-icon.svg';
+import NodeIcon from '../images/node-icon.mini.svg';
+import P5Icon from '../images/p5js-icon.mini.svg';
+import ProcessingLogo from '../images/processing-icon.mini.svg';
 
 const icons = {
   p5: () => <P5Icon className={css.p5} />,

src/components/Footer.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 
 import * as css from './Footer.module.css';
 
-import Logo from '../images/logo.svg';
+import Logo from '../images/logo.mini.svg';
 
 import {
   FaGithub,
@@ -37,7 +37,7 @@ const Footer = () => {
         </div>
         <div className={css.train}>
           <img
-            src="/images/train.svg"
+            src="/images/train.mini.svg"
             width={371}
             height={150}
             alt="The Coding Train illustration"

src/components/HomepageScene.js

@@ -4,10 +4,10 @@ import cn from 'classnames';
 import { Heading1 } from '../components/Heading';
 import Spacer from './Spacer';
 
-import Train from '../images/characters/homepage.svg';
-import TrainTrack from '../images/tracks.svg';
-import Sun from '../images/sun.svg';
-import Cloud from '../images/cloud.svg';
+import Train from '../images/characters/homepage.mini.svg';
+import TrainTrack from '../images/tracks.mini.svg';
+import Sun from '../images/sun.mini.svg';
+import Cloud from '../images/cloud.mini.svg';
 
 import SemiColonCharacter from '../images/characters/SemiColon_hello.mini.svg';
 

src/components/NebulaVideoRow.js

@@ -13,7 +13,7 @@ const NebulaVideoRow = ({ nebulaSlug, variant }) => {
           rel="noopener noreferrer">
           <img
             className={css.svg}
-            src="/images/nebula-button.svg"
+            src="/images/nebula-button.mini.svg"
             alt="Nebula logo"
           />
         </a>

src/components/PassengerShowcasePanel.js

@@ -5,7 +5,7 @@ import Image from './Image';
 
 import * as css from './PassengerShowcasePanel.module.css';
 
-import PlayButton from '../images/playbutton.svg';
+import PlayButton from '../images/playbutton.mini.svg';
 import { useIsFirstRender } from '../hooks';
 import { shuffleCopy } from '../utils';
 

src/components/Question.js

@@ -6,7 +6,7 @@ import YouTubeVideo from './YouTubeVideo';
 
 import * as css from './Question.module.css';
 
-import Open from '../images/open.svg';
+import Open from '../images/open.mini.svg';
 
 import { useLinkParsedText } from '../hooks';
 

src/components/TimestampTimeline.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-import PlayButton from '../images/playbutton-filled.svg';
+import PlayButton from '../images/playbutton-filled.mini.svg';
 
 import * as css from './TimestampTimeline.module.css';
 

src/components/TopBar.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'gatsby';
 
 import Menu from './Menu';
-import NewLogo from '../images/new-logo.svg';
+import NewLogo from '../images/new-logo.mini.svg';
 
 import * as css from './TopBar.module.css';
 

src/components/VideoCard.js

@@ -3,7 +3,7 @@ import { Link } from 'gatsby';
 import cn from 'classnames';
 
 import Image from './Image';
-import Play from '../images/play.svg';
+import Play from '../images/play.mini.svg';
 
 import * as css from './VideoCard.module.css';
 

src/components/tracks/Card.js

@@ -12,7 +12,7 @@ import { filteredPath } from '../../utils';
 import * as css from './Card.module.css';
 import { pattern } from '../../styles/styles.module.css';
 
-import PlayButton from '../../images/playbutton.svg';
+import PlayButton from '../../images/playbutton.mini.svg';
 
 const FilteredVideosSection = ({ videos: allVideos, trackSlug }) => {
   const [expanded, setExpanded] = useState(false);