SVGs

Defined here is some best practice around SVGs that we all try to follow.

Definitions and use

For icons that are used across different components create a SVG component for the icon in one central place and import wherever needed. For single use cases you can define the SVG component within the component using it but try to avoid using SVGs inline to improve overall usability.

Handling background color changes based on state

You can define fill on SVG elements as 'currentColor' and manage its color via parent tailwind classes.