feat(achievements): add cute, accessible inline SVG icons that adapt to light/dark

[Gourangi4]

Summary

Adds consistent, theme-aware icons to Achievements (First Challenge, Design Master, Code Warrior, Community Helper, Streak Master). Icons are inline SVGs that inherit currentColor, so they automatically work in light & dark themes. (Optional: also adds a minimal icon for All Rounder.)

Why

• Improves scannability and visual delight without altering text.
• Keeps accessibility intact: text remains the label, icons are decorative.

What changed

• New BadgeIcon component (badge key → inline SVG).
• Icons render before titles with ~8px gap.
• SVGs: fill="none", stroke="currentColor", aria-hidden, focusable={false}.

Accessibility

• Icons are decorative and not focusable.
• Screen readers announce only the badge titles (unchanged).

Testing

1. Profile → Achievements (light & dark): verify correct icon shows before each title.
2. Zoom to 200%: alignment remains crisp.
3. Keyboard + SR: icons aren’t focusable; titles announce correctly.

Closes #23.

[Gourangi4]

Hey, @Rizwan102003 ,i have resolved this issue can you please check?