Management of SVG

SVGR

Step 1: Create SVG file

Create an SVG file (e.g., apps/web/assets/common/two-dots.svg). Make sure your SVG files use currentColor in the fill or stroke attributes to easily change colors. Example SVG file (apps/web/assets/common/two-dots.svg):

<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M9 19H11V21H9V19ZM13 19H15V21H13V19Z" />
</svg>

Step 2: Export SVG Component

In apps/web/assets/svg.ts, add the following line to export the SVG as a React component:

export { default as TwoDotsIcon } from './common/two-dots.svg';

Step 3: Import and Use SVG Component

Now, import and use the SVG component in your React components. Remember to specify the width and height attributes for better readability and optimization. If color is not defined, it will inherit the theme color.

import React from 'react';
import { TwoDotsIcon } from 'assets/svg';

const KanbanPage = () => {
  return (
    <div>
      <TwoDotsIcon className="w-10 h-10 text-red-500" fill="#ffffff" />
    </div>
  );
};

export default KanbanPage;

---

Important Notes:

• Stroke Colors: There's no need to pass stroke colors. Use text-color to change the color of the SVG, and ensure your SVG file uses currentColor in the fill or stroke attributes.
• Valid SVG Props: You can use valid SVG props on the SVG component.
• TypeScript Support: TypeScript will be added soon for type safety.

This setup allows for easy integration of SVG icons in your Next.js project, enhancing maintainability and code readability.

Additional Information

• Accessibility: Consider providing alternative text (using the aria-label attribute) for your SVG if it conveys information.
• Customization: You can further customize the appearance of your SVG using CSS or inline styles, but remember to strike a balance between flexibility and code organization.