Skip to content

Commit 459532f

Browse files
authored
perf: reduce Material Symbols font payload (#228)
Specify icon names to load from Material Symbols font, reducing the font payload from ~1MB to ~9KB. Note that all icons used *must* be added to this list. **Before** ![image](https://github.com/user-attachments/assets/dc81061b-f9bb-4aa9-a819-fe86e8728d62) **After** ![image](https://github.com/user-attachments/assets/6f6917a0-0966-4d7a-92f5-48a941ff519a)
1 parent 98a6295 commit 459532f

File tree

4 files changed

+36
-26
lines changed

4 files changed

+36
-26
lines changed

index.html

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,10 @@
88
<title>connect</title>
99

1010
<link rel="manifest" href="/manifest.json" />
11-
<link
12-
href="/images/favicon-16x16.png"
13-
rel="icon"
14-
type="image/png"
15-
sizes="16x16"
16-
/>
17-
<link
18-
href="/images/favicon-32x32.png"
19-
rel="icon"
20-
type="image/png"
21-
sizes="32x32"
22-
/>
23-
<link
24-
rel="stylesheet"
25-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block"
26-
/>
27-
<link
28-
rel="stylesheet"
29-
href="https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap"
30-
/>
11+
<link href="/images/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
12+
<link href="/images/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
13+
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap" />
3115

3216
<script defer data-domain="connect.comma.ai" src="https://plausible.io/js/script.js"></script>
3317
</head>

src/components/material/Icon.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ export type IconProps = {
88
size?: '20' | '24' | '40' | '48'
99
}
1010

11+
/**
12+
* Use an icon from the Material Symbols library.
13+
*
14+
* Note: Icon names <strong>must</strong> be added to the icons list in vite.config.ts.
15+
*
16+
* @see https://fonts.google.com/icons
17+
*/
1118
const Icon: Component<IconProps> = (props) => {
1219
// size-20, 24 etc. defined in root.css
1320
const size = () => `size-${props.size || '24'}`

src/pages/auth/login.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { getGoogleAuthUrl, getAppleAuthUrl, getGitHubAuthUrl } from '~/api/auth'
22
import { setAccessToken } from '~/api/auth/client'
33

44
import Button from '~/components/material/Button'
5+
import Icon from '~/components/material/Icon'
56

67
const ACCESS_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg1ODI0NjUsIm5iZiI6MTcxNzA0NjQ2NSwiaWF0IjoxNzE3MDQ2NDY1LCJpZGVudGl0eSI6IjBkZWNkZGNmZGYyNDFhNjAifQ.g3khyJgOkNvZny6Vh579cuQj1HLLGSDeauZbfZri9jw'
78

@@ -86,13 +87,8 @@ export default function Login() {
8687
</div>
8788

8889
<Button
89-
class="gap-4"
9090
onclick={loginAsDemoUser}
91-
trailing={
92-
<span class="material-symbols-outlined icon-outline">
93-
chevron_right
94-
</span>
95-
}
91+
trailing={<Icon>chevron_right</Icon>}
9692
>
9793
Try the demo
9894
</Button>

vite.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,29 @@ export default defineConfig({
1414
project: 'new-connect',
1515
telemetry: false,
1616
}),
17+
{
18+
name: 'inject-material-symbols',
19+
transformIndexHtml(html) {
20+
// Specify icon names to load only the necessary icons, reducing font payload.
21+
// https://developers.google.com/fonts/docs/material_symbols#optimize_the_icon_font
22+
const icons = [
23+
'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'directions_car', 'download',
24+
'error', 'file_copy', 'info', 'menu', 'my_location', 'open_in_new', 'payments', 'person', 'progress_activity',
25+
'satellite_alt', 'search', 'settings', 'sync',
26+
].toSorted().join(',')
27+
return {
28+
html,
29+
tags: [{
30+
tag: 'link',
31+
attrs: {
32+
rel: 'stylesheet',
33+
href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&icon_names=${icons}&display=block`,
34+
},
35+
injectTo: 'head',
36+
}],
37+
}
38+
}
39+
},
1740
],
1841
server: {
1942
port: 3000,

0 commit comments

Comments
 (0)