---
# System prepended metadata

title: 'Design patterns [Frontend]'

---

# Design patterns [Frontend]


## SVG Component
- Create All SVG Components in src/SVGComponents
- Import and re-export in src/SVGComponents/index.js
- Use classes on container div not on SVG
- Use onClick on container not on SVG 
- Always use props for fill,height and width.
- You can use defaultProps for height and width but not for fill. Since fill can be manipulated using parent's css
- All properties on svg,g,path elements should be camelCase to comply with React's JSX
- Try to move the fill to the nearest parent. (`<svg>` or `<g>` in most cases).


## Utils
- Only Project wide utils go here
- Create a new file if the util you're trying to add does not fit in any of the files.
- Try to create util functions as wrappers for third party libraries. We can easily update,replace or remove the 3rd party library in future if need be. For example: We want a library to parse and create query string parameters. We can create a file utils/querystring.js and create all the functions in this file.