-
Notifications
You must be signed in to change notification settings - Fork 51
Management of SVG
Anish edited this page Mar 3, 2024
·
1 revision
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>
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';
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;
- 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.
-
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.