add: drag icons

sh-scripts/gc.sh

@@ -60,13 +60,15 @@ for svg_file in "$SVG_FOLDER"/*.svg; do
     echo "" >> "$FILE_PATH"
     echo "  const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color" >> "$FILE_PATH"
     echo "" >> "$FILE_PATH"
-    echo "  const iconSize = typeof size === 'number' ? `${size}px` : size
-
-	// variants" >> "$FILE_PATH"
+    echo "  const iconSize = typeof size === 'number' ? \`\${size}px\` : size " >> "$FILE_PATH"
+    echo "" >> "$FILE_PATH"
+	  echo "  // variants" >> "$FILE_PATH"
     echo "  const primary = (" >> "$FILE_PATH"
 
     # cat $svg_file >> $FILE_PATH
-    awk '/^<svg/ { found=1 } found && !added { sub(/>/, " style={{ width: iconSize}}\n\t{...restProps}\n\tref={forwardedRef} >", $0); added=1 } 1' "$svg_file"  | awk '{ gsub(/("#E2E2E2"|'\''#E2E2E2'\'')/, "{modifiedColor}"); print}' >> "$FILE_PATH"
+   # awk '/^<svg/ { found=1 } found && !added { sub(/>/, " style={{ width: iconSize}}\n\t{...restProps}\n\tref={forwardedRef} >", $0); added=1 } 1' "$svg_file"  | awk '{ gsub(/("#E2E2E2"|'\''#E2E2E2'\'')/, "{modifiedColor}"); print}' >> "$FILE_PATH"
+awk '/^<svg/ { found=1 } found && !added { sub(/width="[^"]+"/, "style={{ width: iconSize }}\n\t{...restProps}\n\tref={forwardedRef}", $0); sub(/height="[^"]+"/, "", $0); added=1 } 1' "$svg_file" | awk '{ gsub(/("#E2E2E2"|'\''#E2E2E2'\'')/, "{modifiedColor}"); print}' >> "$FILE_PATH"
+
 
     echo ")" >> "$FILE_PATH"
     echo "  return <BaseIcon variants={{ primary }} variant={variant}  />" >> "$FILE_PATH"

sh-scripts/gs.sh

@@ -54,7 +54,7 @@ for svg_file in "$SVG_FOLDER"/*.tsx; do
     echo "    inActive: true," >> "$FILE_PATH"
     echo "  }," >> "$FILE_PATH"
     echo "};" >> "$FILE_PATH"
-
+    echo "" >> "$FILE_PATH"
     echo "export const Large: Story = {" >> "$FILE_PATH"
     echo "  args: {" >> "$FILE_PATH"
     echo "    size: 30," >> "$FILE_PATH"

src/Icons/logo/DragBridgeIcon.tsx

@@ -4,7 +4,7 @@ import BaseIcon from '../../components/BaseIcon'
 import DEFAULT_ICON from '../../constant'
 
 type IconVariant = 'primary'
-type Props = Omit<IconProps, 'variant' | 'color'> & {
+type Props = Omit<IconProps, 'variant' | 'color' | 'inActive'> & {
 	variant?: IconVariant
 }
 

src/Icons/logo/index.ts

@@ -5,6 +5,7 @@ export * from './DragBridgeIcon';
 export * from './DragCaptureOneIcon';
 export * from './DragLrIcon';
 export * from './DragLrcIcon';
+export * from './DragPhotoshopIcon';
 export * from './EditsLogoTextIcon';
 export * from './LightroomClassicIcon';
 export * from './LightroomIcon';

src/new-components/DragFolderIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { IconProps } from '../../types/Icons/types'
+import BaseIcon from '../components/BaseIcon'
+import DEFAULT_ICON from '../constant'
+
+type IconVariant = 'primary'
+type Props = Omit<IconProps, 'variant' | 'color' | 'inActive'> & {
+	variant?: IconVariant
+}
+
+export const DragFolderIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
+	//props
+	const { variant = 'primary', size = DEFAULT_ICON.SIZE, ...restProps } = props
+
+	const iconSize = typeof size === 'number' ? `${size}px` : size
+
+	// variants
+	const primary = (
+		<svg style={{ width: iconSize }} {...restProps} ref={forwardedRef} viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<rect width='60' height='60' rx='10' fill='#414141' />
+			<path
+				d='M42.63 39.15a2.61 2.61 0 0 1-2.61 2.61H19.14a2.61 2.61 0 0 1-2.61-2.61V20.88a2.61 2.61 0 0 1 2.61-2.61h6.525l2.61 3.915H40.02a2.61 2.61 0 0 1 2.61 2.61V39.15Z'
+				stroke='#fff'
+				stroke-width='2'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+		</svg>
+	)
+	return <BaseIcon variants={{ primary }} variant={variant} />
+})

src/new-stories/DragFolderIcon.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { DragFolderIcon } from '../new-components/DragFolderIcon'
+
+const meta: Meta<typeof DragFolderIcon> = {
+	component: DragFolderIcon,
+	title: 'new/DragFolderIcon',
+	decorators: [
+		(Story) => (
+			<div style={{ margin: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof DragFolderIcon>
+
+export const Default: Story = {}
+
+export const Large: Story = {
+	args: {
+		size: 30,
+	},
+}

src/stories/DragPhotoshopIcon.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { DragPhotoshopIcon } from '../icons'
+
+const meta: Meta<typeof DragPhotoshopIcon> = {
+	component: DragPhotoshopIcon,
+	title: 'logo/DragPhotoshopIcon',
+	decorators: [
+		(Story) => (
+			<div style={{ margin: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof DragPhotoshopIcon>
+
+export const Default: Story = {}
+
+export const Large: Story = {
+	args: {
+		size: 30,
+	},
+}