From 777b9a16a45661c2d51220ba332791195b758336 Mon Sep 17 00:00:00 2001
From: Matt Ray <github@mattray.dev>
Date: Thu, 5 Oct 2023 21:11:25 +1100
Subject: [PATCH 1/2] Use a proper React file import for the OpenCost logo

Fixes https://github.com/backstage/backstage/issues/20333

Signed-off-by: Matt Ray <github@mattray.dev>
---
 .changeset/young-toes-knock.md                            | 7 +++++++
 plugins/opencost/README.md                                | 4 ++--
 .../opencost/src/components/OpenCostPage/OpenCostPage.tsx | 8 ++------
 3 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/young-toes-knock.md

diff --git a/.changeset/young-toes-knock.md b/.changeset/young-toes-knock.md
new file mode 100644
index 0000000000..91d263e0fe
--- /dev/null
+++ b/.changeset/young-toes-knock.md
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-opencost': minor
+---
+
+Fix for broken image reference.
+
+Fixed https://github.com/backstage/backstage/issues/20333
diff --git a/plugins/opencost/README.md b/plugins/opencost/README.md
index 39c5e7ee2e..87375314a9 100644
--- a/plugins/opencost/README.md
+++ b/plugins/opencost/README.md
@@ -28,7 +28,7 @@ and
     </FlatRoutes>
     ```
 
-3.  Add link to OpenCost to your sidebar
+3.  Import the `MoneyIcon` and add link to OpenCost to your sidebar
 
     ```typescript
     // packages/app/src/components/Root/Root.tsx
@@ -58,7 +58,7 @@ If you haven't set up an ingress rule, you can port-forward the API with
 kubectl -n opencost port-forward deployment/opencost 9003
 ```
 
-Add the following to your `app-config.yaml`:
+Add the following to your `app-config.local.yaml`:
 
 ```yaml
 opencost:
diff --git a/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
index bd60fa0c35..4062eca155 100644
--- a/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
+++ b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
@@ -17,6 +17,7 @@ import React from 'react';
 import { Grid } from '@material-ui/core';
 import { Header, Page, Content } from '@backstage/core-components';
 import { OpenCostReport } from '../OpenCostReport';
+import logo from '../../images/pig.png';
 
 export const OpenCostPage = () => (
   <Page themeId="tool">
@@ -25,12 +26,7 @@ export const OpenCostPage = () => (
       subtitle="Open source Kubernetes cloud cost monitoring"
     >
       <a href="https://opencost.io">
-        <img
-          width={68}
-          height={64}
-          src={require('../../images/pig.png')}
-          alt="OpenCost"
-        />
+        <img width={68} height={64} src={logo} alt="OpenCost" />
       </a>
     </Header>
     <Content>

From 8145e72530619d2d5ccf5a02bd9c04cec82f3818 Mon Sep 17 00:00:00 2001
From: Matt Ray <github@mattray.dev>
Date: Fri, 6 Oct 2023 13:05:19 +1100
Subject: [PATCH 2/2] Updated for reviewed changes.

Thanks to @tudi2d and @benjdlambert

Signed-off-by: Matt Ray <github@mattray.dev>
---
 .changeset/young-toes-knock.md | 4 +---
 plugins/opencost/README.md     | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.changeset/young-toes-knock.md b/.changeset/young-toes-knock.md
index 91d263e0fe..6371dec193 100644
--- a/.changeset/young-toes-knock.md
+++ b/.changeset/young-toes-knock.md
@@ -1,7 +1,5 @@
 ---
-'@backstage/plugin-opencost': minor
+'@backstage/plugin-opencost': patch
 ---
 
 Fix for broken image reference.
-
-Fixed https://github.com/backstage/backstage/issues/20333
diff --git a/plugins/opencost/README.md b/plugins/opencost/README.md
index 87375314a9..05c63206a2 100644
--- a/plugins/opencost/README.md
+++ b/plugins/opencost/README.md
@@ -58,7 +58,7 @@ If you haven't set up an ingress rule, you can port-forward the API with
 kubectl -n opencost port-forward deployment/opencost 9003
 ```
 
-Add the following to your `app-config.local.yaml`:
+Add the following to your `app-config.yaml`:
 
 ```yaml
 opencost: