diff --git a/assets/src/components/v2/cr_departures/cr_departure_time.tsx b/assets/src/components/v2/cr_departures/cr_departure_time.tsx
index b522e0cb3..62673b2ee 100644
--- a/assets/src/components/v2/cr_departures/cr_departure_time.tsx
+++ b/assets/src/components/v2/cr_departures/cr_departure_time.tsx
@@ -2,7 +2,7 @@ import BaseDepartureTime from "Components/eink/base_departure_time";
import moment from "moment";
import React from "react";
import { TimeRepresentation } from "Util/time_representation";
-import LiveDataSvg from '../../../../static/images/svgr_bundled/live-data-small.svg'
+import LiveData from "Components/v2/bundled_svg/live_data";
interface CRDepartureTimeProps {
departureType: "schedule" | "prediction";
@@ -45,7 +45,10 @@ const CRDepartureTime = ({
= ({
{predictionTime}
-
);
diff --git a/assets/src/components/v2/cr_departures/cr_departures_header.tsx b/assets/src/components/v2/cr_departures/cr_departures_header.tsx
index bf70343c1..5750c1a0d 100644
--- a/assets/src/components/v2/cr_departures/cr_departures_header.tsx
+++ b/assets/src/components/v2/cr_departures/cr_departures_header.tsx
@@ -1,15 +1,13 @@
import React from "react";
-import Free from "../../../../static/images/svgr_bundled/free.svg";
-import CRPill from '../../../../static/images/svgr_bundled/pills/commuter-rail.svg'
+import Free from "Components/v2/bundled_svg/free";
+import { pillPath } from "Util/util";
import RoutePill from "../departures/route_pill";
-import { getHexColor } from "Util/svg_utils";
const CRDeparturesHeader = ({ headerPill }) => {
-
return (
- ![]({pillPath("commuter-rail.svg")})
diff --git a/assets/src/components/v2/cr_departures/overnight_cr_departures.tsx b/assets/src/components/v2/cr_departures/overnight_cr_departures.tsx
index 382fd4e47..d09dd991b 100644
--- a/assets/src/components/v2/cr_departures/overnight_cr_departures.tsx
+++ b/assets/src/components/v2/cr_departures/overnight_cr_departures.tsx
@@ -1,7 +1,7 @@
import React, { ComponentType } from "react";
import DeparturesTable from "Components/v2/cr_departures/cr_departures_table";
import CRDeparturesHeader from "Components/v2/cr_departures/cr_departures_header";
-import OvernightMoon from "../../../../static/images/svgr_bundled/overnight.svg";
+import OvernightMoon from "../bundled_svg/overnight_moon";
import moment from "moment";
import { imagePath } from "Util/util";
import { Direction } from "./cr_departures";
@@ -72,10 +72,8 @@ const OvernightCRDepartures: ComponentType = ({
Consider Commuter Rail during
@@ -19,7 +17,7 @@ const CRDeparturesHeader = ({ headerPill }) => {
-
Show any type of CharlieCard or CharlieTicket to ride free of charge
diff --git a/assets/src/components/v2/dup/departures/no_data_section.tsx b/assets/src/components/v2/dup/departures/no_data_section.tsx
index e47c76a78..a8e3874c5 100644
--- a/assets/src/components/v2/dup/departures/no_data_section.tsx
+++ b/assets/src/components/v2/dup/departures/no_data_section.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import NoConnection from "../../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Components/v2/bundled_svg/no_connection";
import FreeText from "Components/v2/free_text";
const NoDataSection = ({ text }) => {
@@ -10,10 +10,8 @@ const NoDataSection = ({ text }) => {
diff --git a/assets/src/components/v2/dup/page_load_no_data.tsx b/assets/src/components/v2/dup/page_load_no_data.tsx
index 4487726e2..9f8d58a53 100644
--- a/assets/src/components/v2/dup/page_load_no_data.tsx
+++ b/assets/src/components/v2/dup/page_load_no_data.tsx
@@ -1,7 +1,7 @@
import useOutfrontStation from "Hooks/use_outfront_station";
import React, { ComponentType } from "react";
import LinkArrow from "../bundled_svg/link_arrow";
-import Loading from "../../../../static/images/svgr_bundled/loading.svg";
+import Loading from "../bundled_svg/loading";
import NormalHeader from "./normal_header";
import { REPLACEMENTS } from "./no_data";
@@ -14,7 +14,7 @@ const PageLoadNoData: ComponentType = () => {
-
Loading...
diff --git a/assets/src/components/v2/eink/bottom_screen_filler.tsx b/assets/src/components/v2/eink/bottom_screen_filler.tsx
index d5c5e5e50..bbd10cdd8 100644
--- a/assets/src/components/v2/eink/bottom_screen_filler.tsx
+++ b/assets/src/components/v2/eink/bottom_screen_filler.tsx
@@ -1,5 +1,5 @@
import React, { ComponentType } from "react";
-import HandWithPhone from "../../../../static/images/svgr_bundled/hand-with-phone.svg";
+import HandWithPhone from "Components/v2/bundled_svg/hand_with_phone";
const BottomScreenFiller: ComponentType = () => (
@@ -14,7 +14,7 @@ const BottomScreenFiller: ComponentType = () => (
-
diff --git a/assets/src/components/v2/eink/no_data.tsx b/assets/src/components/v2/eink/no_data.tsx
index 8fbdead6a..082044af7 100644
--- a/assets/src/components/v2/eink/no_data.tsx
+++ b/assets/src/components/v2/eink/no_data.tsx
@@ -1,6 +1,6 @@
import React, { ComponentType } from "react";
import { imagePath } from "Util/util";
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Components/v2/bundled_svg/no_connection";
import BottomScreenFiller from "Components/v2/eink/bottom_screen_filler";
import moment from "moment";
@@ -27,10 +27,8 @@ const NoData: ComponentType = () => {
diff --git a/assets/src/components/v2/eink/page_load_no_data.tsx b/assets/src/components/v2/eink/page_load_no_data.tsx
index 8eff7936b..97bb073ff 100644
--- a/assets/src/components/v2/eink/page_load_no_data.tsx
+++ b/assets/src/components/v2/eink/page_load_no_data.tsx
@@ -1,7 +1,7 @@
import React, { ComponentType } from "react";
import { imagePath } from "Util/util";
import BottomScreenFiller from "Components/v2/eink/bottom_screen_filler";
-import Loading from "../../../../static/images/svgr_bundled/loading.svg";
+import Loading from "Components/v2/bundled_svg/loading";
const PageLoadNoData: ComponentType = () => {
return (
@@ -23,10 +23,8 @@ const PageLoadNoData: ComponentType = () => {
diff --git a/assets/src/components/v2/lcd/no_data.tsx b/assets/src/components/v2/lcd/no_data.tsx
index 686670a84..7539c0d8b 100644
--- a/assets/src/components/v2/lcd/no_data.tsx
+++ b/assets/src/components/v2/lcd/no_data.tsx
@@ -1,6 +1,6 @@
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Components/v2/bundled_svg/no_connection";
import React, { ComponentType } from "react";
-import TLogo from "../../../../static/images/svgr_bundled/logo.svg";
+import TLogo from "Components/v2/bundled_svg/t_logo";
interface Props {
show_alternatives: boolean;
@@ -16,10 +16,8 @@ const NoData: ComponentType = ({
@@ -40,7 +38,7 @@ const NoData: ComponentType = ({
{" "}
-
diff --git a/assets/src/components/v2/normal_header.tsx b/assets/src/components/v2/normal_header.tsx
index 588c267ff..4a3ba072e 100644
--- a/assets/src/components/v2/normal_header.tsx
+++ b/assets/src/components/v2/normal_header.tsx
@@ -2,8 +2,6 @@ import useTextResizer from "Hooks/v2/use_text_resizer";
import React, { forwardRef, ComponentType } from "react";
import { getDatasetValue } from "Util/dataset";
-import LiveDataSvg from '../../../static/images/svgr_bundled/live-data-small.svg'
-
import {
classWithModifier,
classWithModifiers,
@@ -112,9 +110,14 @@ const NormalHeaderTime: ComponentType = ({ time }) => {
const NormalHeaderUpdated = () => {
return (
- = ({
- UPDATED LIVE EVERY MINUTE
+
);
diff --git a/assets/src/components/v2/shuttle_bus_info.tsx b/assets/src/components/v2/shuttle_bus_info.tsx
index 87cad8556..56aee47ee 100644
--- a/assets/src/components/v2/shuttle_bus_info.tsx
+++ b/assets/src/components/v2/shuttle_bus_info.tsx
@@ -1,8 +1,8 @@
import Arrow, { Direction } from "Components/solari/arrow";
import React, { ComponentType } from "react";
import { imagePath } from "Util/util";
-import IsaSvg from "../../../static/images/svgr_bundled/isa-negative.svg";
-import Free from "../../../static/images/svgr_bundled/free.svg";
+import Accessible from "Components/v2/bundled_svg/accessible";
+import Free from "Components/v2/bundled_svg/free";
import ClockIcon from "Components/v2/clock_icon";
interface Props {
@@ -77,10 +77,8 @@ const ShuttleBusInfo: ComponentType
+ ![]({imagePath("live-data-small.svg")})
+
+
+ UPDATED LIVE EVERY MINUTE
+
@@ -94,11 +92,9 @@ const ShuttleBusInfo: ComponentType = ({
-
diff --git a/assets/src/components/v2/subway_status/eink_subway_status.tsx b/assets/src/components/v2/subway_status/eink_subway_status.tsx
index 6819d9f78..3596f5397 100644
--- a/assets/src/components/v2/subway_status/eink_subway_status.tsx
+++ b/assets/src/components/v2/subway_status/eink_subway_status.tsx
@@ -1,9 +1,9 @@
import React, { ComponentType, forwardRef } from "react";
-import { classWithModifier, firstWord } from "Util/util";
-import { STRING_TO_SVG } from "Util/svg_utils";
+import { classWithModifier, firstWord, imagePath } from "Util/util";
import {
Alert,
ContractedSection,
+ GLBranch,
GLMultiPill,
LineColor,
Section,
@@ -19,6 +19,7 @@ import {
useSubwayStatusTextResizer,
FittingStep,
} from "./subway_status_common";
+import EinkSubwayStatusPill from "../bundled_svg/eink_subway_status_pill";
////////////////
// COMPONENTS //
@@ -200,8 +201,7 @@ const SubwayStatusRoutePill: ComponentType<{
}
// Return the route pill at the top of the section above alerts.
- const LinePill = STRING_TO_SVG[`${routePill.color}-line`]
- return })
);
}
};
@@ -276,15 +280,16 @@ const SubwayStatusRoutePill: ComponentType<{ routePill: SubwayStatusPill }> = ({
const GLBranchPillGroup: ComponentType> = ({
branches: [firstBranch, ...rest],
}) => {
- const ComboLinePill = STRING_TO_SVG[`gl-${firstBranch}`]
-
return (
<>
- })
+ {rest.map((branch) => (
+ })
+ ))}
);
};
@@ -336,6 +341,16 @@ const shouldShowLastRule = ({ blue, orange, red, green }: SubwayStatusData) => {
return firstThreeContracted && (glExtended || glContractedWithNoSecondPill);
};
+const getStandardLinePillPath = (lineColor: LineColor) =>
+ pillPath(`${lineColor}-line.svg`);
+
+const getGLComboPillPath = (branch: GLBranch) => pillPath(`gl-${branch}.svg`);
+
+const getGLBranchLetterPillPath = (branch: GLBranch) =>
+ pillPath(`green-${branch}-circle.svg`);
+
+const pillPath = (pillFilename: string) => imagePath(`pills/${pillFilename}`);
+
const isExtendedWithNoLocation = (
section: Section
): section is ExtendedSection => isExtended(section) && !section.alert.location;
diff --git a/assets/src/util/svg_utils.tsx b/assets/src/util/svg_utils.tsx
deleted file mode 100644
index ba982c203..000000000
--- a/assets/src/util/svg_utils.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import BlueLine from '../../static/images/svgr_bundled/pills/blue-line.svg'
-import BL from '../../static/images/svgr_bundled/pills/bl.svg'
-import OrangeLine from '../../static/images/svgr_bundled/pills/orange-line.svg'
-import OL from '../../static/images/svgr_bundled/pills/ol.svg'
-import RedLine from '../../static/images/svgr_bundled/pills/red-line.svg'
-import RL from '../../static/images/svgr_bundled/pills/rl.svg'
-import GreenLine from '../../static/images/svgr_bundled/pills/green-line.svg'
-import GL from '../../static/images/svgr_bundled/pills/gl.svg'
-import GLB from '../../static/images/svgr_bundled/pills/gl-b.svg'
-import GLC from '../../static/images/svgr_bundled/pills/gl-c.svg'
-import GLD from '../../static/images/svgr_bundled/pills/gl-d.svg'
-import GLE from '../../static/images/svgr_bundled/pills/gl-e.svg'
-import GreenLineB from '../../static/images/svgr_bundled/pills/green-line-b.svg'
-import GreenLineC from '../../static/images/svgr_bundled/pills/green-line-c.svg'
-import GreenLineD from '../../static/images/svgr_bundled/pills/green-line-d.svg'
-import GreenLineE from '../../static/images/svgr_bundled/pills/green-line-e.svg'
-import GreenBCircle from '../../static/images/svgr_bundled/pills/green-b-circle.svg'
-import GreenCCircle from '../../static/images/svgr_bundled/pills/green-c-circle.svg'
-import GreenDCircle from '../../static/images/svgr_bundled/pills/green-d-circle.svg'
-import GreenECircle from '../../static/images/svgr_bundled/pills/green-e-circle.svg'
-import CommuterRail from '../../static/images/svgr_bundled/pills/commuter-rail.svg'
-
-export const STRING_TO_SVG: {[key: string]: any} = {
- "blue-line": BlueLine,
- "bl": BL,
- "orange-line": OrangeLine,
- "ol": OL,
- "red-line": RedLine,
- "rl": RL,
- "green-line": GreenLine,
- "gl": GL,
- "gl-b": GLB,
- "gl-c": GLC,
- "gl-d": GLD,
- "gl-e": GLE,
- "green-line-b": GreenLineB,
- "green-line-c": GreenLineC,
- "green-line-d": GreenLineD,
- "green-line-e": GreenLineE,
- "green-b-circle": GreenBCircle,
- "green-c-circle": GreenCCircle,
- "green-d-circle": GreenDCircle,
- "green-e-circle": GreenECircle,
- "commuter-rail": CommuterRail,
-};
-
-const STRING_TO_COLOR: {[key: string]: string} = {
- "blue": "#003DA5",
- "orange": "#ED8B00",
- "red": "#DA291C",
- "green": "#00843D",
- "purple": "#80276C",
-}
-
-export const getHexColor = (color: string) => STRING_TO_COLOR[color]
diff --git a/assets/static/images/svgr_bundled/README.md b/assets/static/images/svgr_bundled/README.md
deleted file mode 100644
index 556e10da0..000000000
--- a/assets/static/images/svgr_bundled/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-## Using SVGs
-
-We've started using an svg loader called SVGR that imports svgs as ready-to-use components! No longer do we need individual svgs with unique colors. Now, we can import an svg shape as a component and pass the relevant size and shape as props.
-
-We're in the process of consolidating this huge assets folder of svgs into this `svgr_bundled` folder.
-
-```
-import Free from "../../../../static/images/svgr_bundled/free.svg";
-
-