Skip to content

Commit

Permalink
Extracting material symbols using custom vite plugin.
Browse files Browse the repository at this point in the history
  • Loading branch information
RobinTail committed Nov 30, 2024
1 parent 467c860 commit 0fe5e7a
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 22 deletions.
2 changes: 1 addition & 1 deletion frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<meta property=”og:image:height” content=”640″ />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=%VITE_ICONS%" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&__MATERIAL_SYMBOLS__" />
<title>In Case of my Death</title>
</head>
<body>
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@emotion/styled": "^11.13.5",
"@mui/lab": "^6.0.0-beta.17",
"@mui/material": "^6.1.9",
"@types/esquery": "^1.5.4",
"react": "^18.3.1",
"react-clipboard-button": "^2.0.0",
"react-dom": "^18.3.1",
Expand Down
47 changes: 26 additions & 21 deletions frontend/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import esquery, { Literal } from "esquery";

const icons = [
"account_circle",
"brightness_4",
"brightness_7",
"build_circle",
"chat",
"comment",
"content_copy",
"conversion_path",
"delete",
"fact_check",
"home",
"info",
"play_circle",
"ring_volume",
"send",
"wifi_off",
].toSorted();

process.env.VITE_ICONS = icons.join(",");
const registry = new Set<string>();

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
{
name: "material-symbols",
enforce: "pre",
moduleParsed: function ({ id, ast }) {
const nodes = esquery.query(
ast,
"CallExpression[callee.name='jsx'][arguments.0.name='Icon'] > .arguments > Property[key.name='children'] Literal",
) as unknown as Literal[];
this.debug({ id, message: "value" });
for (const { value } of nodes) {
if (typeof value === "string") registry.add(value);
}
},
transformIndexHtml: (html) =>
html.replace(
"__MATERIAL_SYMBOLS__",
registry.size
? `icon_names=${Array.from(registry.values()).toSorted().join(",")}`
: "", // dev mode, all icons
),
},
],
});
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1128,6 +1128,13 @@
dependencies:
"@types/ms" "*"

"@types/esquery@^1.5.4":
version "1.5.4"
resolved "https://registry.yarnpkg.com/@types/esquery/-/esquery-1.5.4.tgz#ebfd3a3bca6db50446688ba5592d18bb9b807e91"
integrity sha512-yYO4Q8H+KJHKW1rEeSzHxcZi90durqYgWVfnh5K6ZADVBjBv2e1NEveYX5yT2bffgN7RqzH3k9930m+i2yBoMA==
dependencies:
"@types/estree" "*"

"@types/estree-jsx@^1.0.0":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18"
Expand Down

0 comments on commit 0fe5e7a

Please sign in to comment.