# 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.