Asset and Icons Restructuring/Refactor

[mahid797]

Icon Refactoring Guidelines

To improve the maintainability, reusability, and consistency of our codebase, we are converting all SVG icons into React components. This will ensure dynamic styling capabilities, improved accessibility, and easier integration across the project.

By refactoring these icons, we aim to:

• Make the icons reusable with dynamic attributes like size and color.
• Ensure consistent naming and structure for easier navigation and debugging.
• Improve accessibility and alignment with React's standards.
• Optimize and clean up the SVG markup for better performance.

---

Key Points for Consistency and Best Practices

1. Interface Extending SVGProps:

   • The interface should extend SVGProps<SVGSVGElement> to inherit standard SVG attributes. This ensures flexibility and compatibility for future customization.

2. Optional Props with Default Values:

   • Define width, height, color, and strokeWidth as optional props with default values matching the original SVG attributes. This allows the icons to work seamlessly by default while supporting customization.

3. Dynamic Props with {...props}:

   • Always include {...props} in the <svg> element to dynamically pass additional attributes, improving reusability across components.

4. React-Equivalent Attribute Names:

   • Convert SVG attributes to their React equivalents (e.g., stroke-linejoin → strokeLinejoin,
     stroke-linecap → strokeLinecap). Incorrect prop names will trigger warnings in the console.
     For e.g. Warning: Invalid DOM property 'stroke-linecap'. Did you mean 'strokeLinecap'?

5. Consistent Naming Conventions:

   • Use PascalCase for both component names (e.g., ArrowIcon, SearchIcon) and file names. File names should match component names to maintain clarity and consistency.

6. SVG Optimization:

   • Optimize SVG files, especially those with extensive path definitions, using an online SVG optimizer. This reduces file size and improves performance.

7. Accessibility:

   • Add aria-label or role="img" attributes for better accessibility. For example:

     <svg {...props} aria-label="Arrow Icon" role="img">

8. JSDoc Documentation:

   • Add detailed JSDoc comments for each icon component, describing its purpose, props, and usage. These comments improve developer understanding and streamline future updates. Example:

     /**
      * A reusable SVG icon component for rendering an arrow icon.
      * 
      * @param {number} [width=20] - The width of the icon in pixels. Defaults to 20 if not specified.
      * @param {number} [height=20] - The height of the icon in pixels. Defaults to 20 if not specified.
      * @param {string} [color='#667085'] - The stroke color of the icon. Accepts any valid CSS color value. 
      * @param {number} [strokeWidth] - The stroke width of the icon's path. Optional.
      * @param {React.SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style` etc.
      * 
      * @example
      * // Basic usage
      * <ArrowIcon />
      */

---

Additional Notes

• Apply these steps to all icons, including those already converted to React components, to maintain consistency across the project.
• Update all instances of the icons in the project after conversion to ensure consistency in usage.