Merge pull request #23397 from storybookjs/valentin/replace-chevron-i…

…con-on-configure-page Configure.mdx: Replace chevron icon on Configure page to avoid @storybook/components usage
storybookjs · Jul 11, 2023 · b29d22b · b29d22b
2 parents 825b8b3 + e60e8f9
commit b29d22b
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 8 deletions.
diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/blocks";
-import { Icons } from "@storybook/components";
 import Image from "next/image";
 
 import Github from "./assets/github.svg";
@@ -17,7 +16,21 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <Icons icon="arrowright" width="8px" style={{ marginLeft: '4px' }}/>
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
 
 <Meta title="Configure your project" />
 

diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/blocks";
-import { Icons } from "@storybook/components";
 import Image from "next/image";
 
 import Github from "./assets/github.svg";
@@ -17,7 +16,21 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <Icons icon="arrowright" width="8px" style={{ marginLeft: '4px' }}/>
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
 
 <Meta title="Configure your project" />
 

diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/blocks";
-import { Icons } from "@storybook/components";
 import Image from "next/image";
 
 import Github from "./assets/github.svg";
@@ -17,7 +16,21 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <Icons icon="arrowright" width="8px" style={{ marginLeft: '4px' }}/>
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
 
 <Meta title="Configure your project" />
 

diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx
@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/blocks";
-import { Icons } from "@storybook/components";
 
 import Github from "./assets/github.svg";
 import Discord from "./assets/discord.svg";
@@ -16,7 +15,21 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <Icons icon="arrowright" width="8px" style={{ marginLeft: '4px' }}/>
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
 
 <Meta title="Configure your project" />