Replace Emojis with SVG Icon Library
did:plc:pddp4xt5lgnv2qsegbzzs4xg opened this Oct 14, 2025 0 comments
did:plc:pddp4xt5lgnv2qsegbzzs4xg opened Oct 14, 2025
Replace Emojis with SVG Icon Library
Goal
Replace unicode emojis/symbols with proper SVG icons from a lightweight icon library for better consistency and rendering across platforms.
Current State
You can tell the current implementation was heavily AI based on the number of emojis. These render inconsistently across browsers/platforms and don't match the overall design.
Recommended Library
Lucide (https://lucide.dev) - Lightweight, modern, easy to integrate
- CDN available (no build step needed)
- Simple HTML:
<i data-lucide="star"></i>
Tasks
1. Add Icon Library (pkg/appview/templates/layouts/base.html)
Add to <head>:
<script src="https://unpkg.com/lucide@latest"></script>Add before closing </body>:
<script>
lucide.createIcons();
</script>2. Replace Stars
Files:
pkg/appview/templates/pages/repository.html:40pkg/appview/templates/partials/push-list.html:20pkg/appview/templates/components/repo-card.html:34pkg/appview/static/js/app.js:133,159,165
Replace with:
<i data-lucide="star" class="star-icon"></i>
<i data-lucide="star" class="star-icon star-filled"></i>Update CSS for icon sizing and color.
4. Replace Other Icons
- Trash: Use
<i data-lucide="trash-2"></i> - Checkmark: Use
<i data-lucide="check"></i> - Moon/Sun (for dark mode):
<i data-lucide="moon"></i>/<i data-lucide="sun"></i>
5. Update CSS (pkg/appview/static/css/style.css)
Add icon styling:
.star-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
.star-filled {
fill: var(--star);
stroke: var(--star);
}Files to Modify
pkg/appview/templates/layouts/base.html- Add librarypkg/appview/templates/pages/repository.html- Replace stars, trashpkg/appview/templates/partials/push-list.html- Replace starspkg/appview/templates/components/repo-card.html- Replace starspkg/appview/static/js/app.js- Update star/arrow logicpkg/appview/static/css/style.css- Add icon stylespkg/appview/handlers/settings.go:131- Replace checkmark in HTML response
No activity yet.