Refactor choice icons and update SVG assets#159
Conversation
- Remove custom `iconStyle` for now. - Updated svg icons. - Adjusted ChoiceGroup component styles for better icon alignment and spacing. - Updated icon sources for JavaScript, TypeScript, npm, pnpm, Bun, and Yarn to use devicon CDN.
|
Btw. about the URL about we use GitHub? See for example: https://vike.dev/press#social-media => https://raw.githubusercontent.com/vikejs/vike-assets/main/logo/vike-social.png |
|
But we can use also use https://devicon.dev/ (we can change to GitHub only if we have issues with it). |
Intervention++ |
Yes, I haven’t updated the Tabs component yet. |
Let’s keep using https://devicon.dev/ for now |
|
Actually, maybe we should always use devicon.dev for all icons? The thing I like about |
- Modified viewBox and aspect ratio for h3-icon.svg, react-icon.svg, solidjs-icon.svg, and vuejs-icon.svg - Adjusted the gap and line-height in ChoiceGroup.css. - Changed image dimensions in ChoiceGroup.css to enhance icon display consistency.
|
There is also https://simpleicons.org |
…ta URIs Adjust SVG viewBox values for consistent rendering, then replace external devicon URLs with local data URI icons for Code Lang and Package Managers.
|
Both https://devicon.dev/ and https://simpleicons.org/ are missing some icons. For the best results, we need to adjust the SVG viewBox values. |
3 participants
Addresses feedback from: #153 (comment)
This change introduces a fixed icon column (wrapper) for option (choice) icons, ensuring labels start at a consistent horizontal position regardless of icon dimensions. SVG assets can have different internal structures (e.g. viewBox, internal padding, artwork bounds, and centering), which may affect their visual footprint even when rendered at the same size. Reserving a fixed icon area reduces layout dependence on those asset-specific characteristics.
Additional cleanup includes:
iconStyleoverrides (to be revisited in a follow-up update).