feat: new arrow component

src/components/Icon/Icon.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Icon } from './Icon'
+import { IconProps } from './Icon.types'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<IconProps> = {
+    title: 'Example/Icon',
+    component: Icon,
+    tags: ['autodocs'],
+    argTypes: {
+        src: {
+            type: 'string',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<IconProps>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+    args: {
+        src: 'arrow',
+    },
+}

src/components/Icon/Icon.tsx

@@ -0,0 +1,8 @@
+
+import { IconProps } from './Icon.types'
+import * as S from './style'
+
+export const Icon = ({src,...props}:IconProps) => {
+
+    return <S.Icon src={`${src}.svg`}{...props} />
+}

src/components/Icon/Icon.types.tsx

@@ -0,0 +1,3 @@
+import { ImgHTMLAttributes } from "react"
+
+export type IconProps = ImgHTMLAttributes<HTMLImageElement>

src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon'
+export type { IconProps } from './Icon.types'

src/components/Icon/style.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Icon = styled.img`
+
+
+`

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { Icon } from 'src/components/Icon'
 import * as S from '../styles/pages/Home'
 
 export default function Home() {
@@ -12,6 +13,7 @@ export default function Home() {
       </Head>
       <main>
         <S.Hero>Open  Start</S.Hero>
+        <Icon aria-label='seta para direita na cor purple' src='arrow' width='30px'/>
       </main>
     </>
   )