# Adding an `<svg>` icon
Add the svg to assets/icons/ then the correct subfolder depending on the icon type.
The svg should have no unnecessary ids, and you should remove any fill or stroke properties on the svg or you won't be able to override with css.
Then go to the folder src/components/icons/ then the same subfolder.  Add a js file like its siblings, (import the svg then export a function that returns the svg with a classname).

This approach will allow us to import single icons and save a lot on bundle size compared to the legacy way of carrying all of the svg definitions even if we only needed to use one icon.

## Using `<svg>` icons in your project
import any icon using its exported name like this:
```js
import { AddGlyph } from 'frontend-react-components';
```

and use it like this:
```jsx
<AddGlyph
   onClick={()=> { /* do something */ }}
/>
```

Dimensions and color (for any icons that are single colored), can be changed using css and the corresponding className.

i.e.
```scss
.ContainerComponent {
    .Add {
        fill: 'blue';
        height: 50px;
        width: 50px;
    }
}
```