graphiql,app: export icon and avoid routeRef usage in SidebarItem

Co-authored-by: Juan Lulkin <[email protected]>
Signed-off-by: Patrik Oldsberg <[email protected]>

.changeset/dirty-flowers-fail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphiql': patch
+---
+
+Export `GraphiQLIcon`.

packages/app/src/components/Root/Root.tsx

@@ -36,7 +36,7 @@ import {
   SidebarSpace,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
-import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
+import { GraphiQLIcon } from '@backstage/plugin-graphiql';
 import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 import { SidebarSearch } from '@backstage/plugin-search';
 
@@ -90,11 +90,7 @@ const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
       <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
       <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-      <SidebarItem
-        icon={graphiQLRouteRef.icon!}
-        to={graphiQLRouteRef.path}
-        text={graphiQLRouteRef.title}
-      />
+      <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarSettings />

plugins/graphiql/src/index.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import { IconComponent } from '@backstage/core';
+import GraphiQLIconComponent from './assets/graphiql.icon.svg';
+
 export {
   graphiqlPlugin,
   graphiqlPlugin as plugin,
@@ -22,3 +25,4 @@ export {
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';
+export const GraphiQLIcon: IconComponent = GraphiQLIconComponent;