update all svg import paths

Author: fturmel

src/components/CharacterSpacer.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-import DefaultCharacter from '../images/characters/Triangle_4.mini.svg';
+import DefaultCharacter from '../images/characters/Triangle_4.svg';
 
 import * as css from './CharacterSpacer.module.css';
 

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.mini.svg';
-import P5Icon from '../images/p5js-icon.mini.svg';
-import ProcessingLogo from '../images/processing-icon.mini.svg';
+import NodeIcon from '../images/node-icon.svg';
+import P5Icon from '../images/p5js-icon.svg';
+import ProcessingLogo from '../images/processing-icon.svg';
 
 const icons = {
   p5: () => <P5Icon className={css.p5} />,

src/components/Footer.js

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

src/components/HomepageScene.js

@@ -4,12 +4,11 @@ import cn from 'classnames';
 import { Heading1 } from '../components/Heading';
 import Spacer from './Spacer';
 
-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';
+import trainSvgUrl from '../images/characters/homepage.svg?url'; // heavy asset, don't inline it
+import SemiColonCharacter from '../images/characters/SemiColon_hello.svg';
+import Cloud from '../images/cloud.svg';
+import Sun from '../images/sun.svg';
+import TrainTrack from '../images/tracks.svg';
 
 import * as css from './HomepageScene.module.css';
 
@@ -30,7 +29,7 @@ const HomepageScene = ({ title, description }) => {
           {title}
         </Heading1>
 
-        <Train className={css.train} />
+        <img className={css.train} src={trainSvgUrl} alt="" />
         <TrainTrack className={css.trainTrack} />
         <p className={css.paragraph}>{description}</p>
       </header>

src/components/HomepageScene.module.css

@@ -1,8 +1,6 @@
 .header {
   position: relative;
   height: var(--baseline-9x);
-  background-color: var(--pink-tint);
-  background: var(--pink-tint);
   background: linear-gradient(
     0deg,
     transparent 0%,
@@ -44,6 +42,7 @@
   position: absolute;
   bottom: 13px;
   right: 0;
+  width: auto;
   height: var(--baseline-6x);
 }
 

src/components/ItemsPage.js

@@ -11,10 +11,10 @@ import Button from './Button';
 
 import * as css from './ItemsPage.module.css';
 
-import SemiColon from '../images/characters/SemiColon_3.mini.svg';
-import ZeroCharacter from '../images/characters/Zero_4.mini.svg';
-import ZeroCharacter2 from '../images/characters/Zero_3.mini.svg';
-import TriangleCharacter from '../images/characters/Triangle_6.mini.svg';
+import SemiColon from '../images/characters/SemiColon_3.svg';
+import ZeroCharacter from '../images/characters/Zero_4.svg';
+import ZeroCharacter2 from '../images/characters/Zero_3.svg';
+import TriangleCharacter from '../images/characters/Triangle_6.svg';
 
 const ItemsPage = ({
   title,

src/components/NebulaVideoRow.js

@@ -3,6 +3,8 @@ import cn from 'classnames';
 
 import * as css from './NebulaVideoRow.module.css';
 
+import nebulaButtonSvgUrl from '../images/nebula-button.svg?url';
+
 const NebulaVideoRow = ({ nebulaSlug, variant }) => {
   return (
     <div className={cn(css.root, css[variant], { [css.hideRow]: !nebulaSlug })}>
@@ -11,11 +13,7 @@ const NebulaVideoRow = ({ nebulaSlug, variant }) => {
           href={`https://nebula.tv/videos/${nebulaSlug}`}
           target="_blank"
           rel="noopener noreferrer">
-          <img
-            className={css.svg}
-            src="/images/nebula-button.mini.svg"
-            alt="Nebula logo"
-          />
+          <img className={css.svg} src={nebulaButtonSvgUrl} alt="Nebula logo" />
         </a>
       )}
     </div>

src/components/PassengerShowcasePanel.js

@@ -5,7 +5,7 @@ import Image from './Image';
 
 import * as css from './PassengerShowcasePanel.module.css';
 
-import PlayButton from '../images/playbutton.mini.svg';
+import PlayButton from '../images/playbutton.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.mini.svg';
+import Open from '../images/open.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.mini.svg';
+import PlayButton from '../images/playbutton-filled.svg';
 
 import * as css from './TimestampTimeline.module.css';