WW-329: Move avatar badges from icons to graphics

[lukaszkonieczny]

Based on svg's clean up made in #68 we added some more changes:

• change badges size to 18px - there were unnecessary empty space
• moved badges into graphics folder - after talk with Ania Koronowicz (and she discussed it with Derek) avatar badges should not be treated as icons and should not be customizable, that's why we created new folder in assets
• update avatar section on the reference page

@Wikia/west-wing @Wikia/x-wing

[idradm]

Have you thought about adding a ready for use with user avatars CSS classes?

e.g.: wds-staff-badge class added to any element would produce a staff badge on its left top corner.

[lukaszkonieczny]

@Wikia/x-wing What do you think about @idradm idea?

[kvas-damian]

@lukaszkonieczny If this the main use-case for those badges, then I agree with @idradm - we should create a component for that in DS.

[rogatty]

wds-staff-badge class added to any element would produce a staff badge on its left top corner.

If adding this class is enough to show a badge it means that we need to inline SVG in the CSS as a background. We wanted to avoid doing that because of the performance impact (CSS blocks page render, SVG doesn't) and the lack of possibility to customize those assets, e.g. modifying their fill color.

What @kvas-damian proposes is to create a DS component that has its markup described and which each client has to generate, together with the SVG.