Skip to content

Commit b6b7419

Browse files
etewiahclaude
etewiah
and
claude
committed
Replace font icons with SVG sprite system (98% smaller)
- Switch from Material Symbols font (3.65MB) to SVG sprite (60KB) - Update icon helper to render SVG with <use> references - Update liquid filter for SVG icons - Add rake task for sprite generation (icons:svg:generate) - Add comprehensive documentation in docs/icons/ - Update tests for new SVG-based implementation Benefits: - 98% reduction in icon asset size - No font loading delay (FOIT eliminated) - Instant icon rendering - Works without CSS loaded 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent e1698c8 commit b6b7419

File tree

9 files changed

+1491
-148
lines changed

9 files changed

+1491
-148
lines changed

‎app/assets/images/icons/material-symbols.svg‎

Lines changed: 790 additions & 0 deletions
Loading

‎app/assets/stylesheets/material-icons.css‎

Lines changed: 84 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,102 @@
11
/*
2-
* Material Symbols Outlined for PropertyWebBuilder
2+
* SVG Icon System for PropertyWebBuilder
33
* https://fonts.google.com/icons
44
*
55
* This is the ONLY approved icon system for this project.
66
* Use the icon(:name) helper to render icons.
7-
* See: docs/architecture/MATERIAL_ICONS_MIGRATION_PLAN.md
7+
*
8+
* Performance: SVG sprite (~60KB) vs font (~3.6MB) = 98% smaller
9+
* Benefits: No font loading delay, instant rendering, no FOIT/FOUT
10+
*
11+
* See: docs/icons/SVG_ICON_SYSTEM.md
812
*/
913

1014
/* ============================================
11-
* Font Face Declaration
12-
* ============================================ */
13-
14-
@font-face {
15-
font-family: 'Material Symbols Outlined';
16-
font-style: normal;
17-
font-weight: 100 700;
18-
font-display: swap;
19-
src: url('/fonts/material-symbols/MaterialSymbolsOutlined.woff2') format('woff2');
20-
}
21-
22-
/* ============================================
23-
* Base Icon Styles
15+
* Base Icon Styles (SVG)
2416
* ============================================ */
2517

26-
.material-symbols-outlined {
27-
font-family: 'Material Symbols Outlined';
28-
font-weight: normal;
29-
font-style: normal;
30-
font-size: 24px;
31-
line-height: 1;
32-
letter-spacing: normal;
33-
text-transform: none;
18+
.icon {
3419
display: inline-block;
35-
white-space: nowrap;
36-
word-wrap: normal;
37-
direction: ltr;
38-
vertical-align: middle;
39-
-webkit-font-smoothing: antialiased;
40-
-moz-osx-font-smoothing: grayscale;
41-
text-rendering: optimizeLegibility;
42-
font-feature-settings: 'liga';
20+
width: 1em;
21+
height: 1em;
22+
vertical-align: -0.125em; /* Align with text baseline */
23+
fill: currentColor;
24+
flex-shrink: 0;
25+
}
4326

44-
/* Default: outlined style */
45-
font-variation-settings:
46-
'FILL' 0,
47-
'wght' 400,
48-
'GRAD' 0,
49-
'opsz' 24;
27+
/* Ensure use element inherits fill */
28+
.icon use {
29+
fill: inherit;
5030
}
5131

5232
/* ============================================
5333
* Size Variants
5434
* ============================================ */
5535

56-
.material-symbols-outlined.md-14 {
36+
.icon-xs {
37+
width: 14px;
38+
height: 14px;
5739
font-size: 14px;
58-
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
5940
}
6041

61-
.material-symbols-outlined.md-18 {
42+
.icon-sm {
43+
width: 18px;
44+
height: 18px;
6245
font-size: 18px;
63-
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
6446
}
6547

66-
.material-symbols-outlined.md-24 {
48+
.icon-md {
49+
width: 24px;
50+
height: 24px;
6751
font-size: 24px;
68-
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
6952
}
7053

71-
.material-symbols-outlined.md-36 {
54+
.icon-lg {
55+
width: 36px;
56+
height: 36px;
7257
font-size: 36px;
73-
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
7458
}
7559

76-
.material-symbols-outlined.md-48 {
60+
.icon-xl {
61+
width: 48px;
62+
height: 48px;
7763
font-size: 48px;
78-
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
7964
}
8065

8166
/* ============================================
8267
* Style Variants
8368
* ============================================ */
8469

85-
/* Filled variant */
86-
.material-symbols-outlined.filled {
87-
font-variation-settings:
88-
'FILL' 1,
89-
'wght' 400,
90-
'GRAD' 0,
91-
'opsz' 24;
70+
/* Filled variant - uses CSS filter to simulate filled look */
71+
.icon-filled {
72+
/* Slightly bolder appearance */
73+
stroke: currentColor;
74+
stroke-width: 0.5px;
9275
}
9376

9477
/* Bold/emphasized variant */
95-
.material-symbols-outlined.bold {
96-
font-variation-settings:
97-
'FILL' 0,
98-
'wght' 700,
99-
'GRAD' 0,
100-
'opsz' 24;
78+
.icon-bold {
79+
stroke: currentColor;
80+
stroke-width: 1px;
10181
}
10282

10383
/* Light variant */
104-
.material-symbols-outlined.light {
105-
font-variation-settings:
106-
'FILL' 0,
107-
'wght' 300,
108-
'GRAD' 0,
109-
'opsz' 24;
110-
}
111-
112-
/* Filled + Bold */
113-
.material-symbols-outlined.filled.bold {
114-
font-variation-settings:
115-
'FILL' 1,
116-
'wght' 700,
117-
'GRAD' 0,
118-
'opsz' 24;
84+
.icon-light {
85+
opacity: 0.7;
11986
}
12087

12188
/* ============================================
12289
* Utility Classes
12390
* ============================================ */
12491

12592
/* Fixed width for alignment in lists */
126-
.material-symbols-outlined.icon-fw {
93+
.icon-fw {
12794
width: 1.5em;
12895
text-align: center;
12996
}
13097

13198
/* Spin animation for loading states */
132-
.material-symbols-outlined.icon-spin {
99+
.icon-spin {
133100
animation: icon-spin 1s linear infinite;
134101
}
135102

@@ -139,7 +106,7 @@
139106
}
140107

141108
/* Pulse animation */
142-
.material-symbols-outlined.icon-pulse {
109+
.icon-pulse {
143110
animation: icon-pulse 1s ease-in-out infinite;
144111
}
145112

@@ -148,6 +115,11 @@
148115
50% { opacity: 0.5; }
149116
}
150117

118+
/* Fallback indicator (development) */
119+
.icon-fallback {
120+
color: #f59e0b; /* Amber warning color */
121+
}
122+
151123
/* ============================================
152124
* Icon Button Component
153125
* ============================================ */
@@ -236,24 +208,27 @@
236208

237209
/* Property feature icons */
238210
.property-feature-icon {
239-
font-size: 20px;
211+
width: 20px;
212+
height: 20px;
240213
margin-right: 0.25rem;
241214
color: var(--text-muted, #6b7280);
242215
}
243216

244217
/* Navigation icons */
245218
.nav-icon {
246-
font-size: 20px;
219+
width: 20px;
220+
height: 20px;
247221
margin-right: 0.5rem;
248222
}
249223

250224
/* Action button icons */
251-
.btn .material-symbols-outlined {
225+
.btn .icon {
252226
margin-right: 0.375rem;
253-
font-size: 1.25em;
227+
width: 1.25em;
228+
height: 1.25em;
254229
}
255230

256-
.btn-icon-only .material-symbols-outlined {
231+
.btn-icon-only .icon {
257232
margin-right: 0;
258233
}
259234

@@ -265,6 +240,8 @@
265240
transform: translateY(-50%);
266241
color: var(--text-muted, #6b7280);
267242
pointer-events: none;
243+
width: 20px;
244+
height: 20px;
268245
}
269246

270247
.input-with-icon {
@@ -276,23 +253,43 @@
276253
* ============================================ */
277254

278255
/* Ensure icons don't interfere with screen readers when decorative */
279-
.material-symbols-outlined[aria-hidden="true"],
256+
.icon[aria-hidden="true"],
280257
.brand-icon[aria-hidden="true"] {
281258
speak: never;
282259
}
283260

284261
/* High contrast mode support */
285262
@media (forced-colors: active) {
286-
.material-symbols-outlined,
263+
.icon,
287264
.brand-icon {
288265
forced-color-adjust: auto;
289266
}
290267
}
291268

292269
/* Reduced motion preference */
293270
@media (prefers-reduced-motion: reduce) {
294-
.material-symbols-outlined.icon-spin,
295-
.material-symbols-outlined.icon-pulse {
271+
.icon-spin,
272+
.icon-pulse {
296273
animation: none;
297274
}
298275
}
276+
277+
/* ============================================
278+
* Legacy Support (deprecated - remove after migration)
279+
* These classes maintain backwards compatibility
280+
* with any remaining font-based icon usage
281+
* ============================================ */
282+
283+
.material-symbols-outlined {
284+
/* Map to SVG icon styles */
285+
display: inline-block;
286+
width: 24px;
287+
height: 24px;
288+
vertical-align: middle;
289+
}
290+
291+
.material-symbols-outlined.md-14 { width: 14px; height: 14px; }
292+
.material-symbols-outlined.md-18 { width: 18px; height: 18px; }
293+
.material-symbols-outlined.md-24 { width: 24px; height: 24px; }
294+
.material-symbols-outlined.md-36 { width: 36px; height: 36px; }
295+
.material-symbols-outlined.md-48 { width: 48px; height: 48px; }

0 commit comments

Comments
 (0)