vite-plugin-material-symbols 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ## Version 0
 
+### v0.7.1
+
+- Added the following configuration options for flexibility:
+  - `moduleIdRegex` — the regex to match module IDs that should be processed for finding icon names;
+  - `jsxNodeRegex` — The regex to match JSX nodes that should be processed in parsed AST;
+- The option `component` now also can be a regex to match multiple component names.
+
+### v0.7.0
+
+- Supporting Vite 8;
+- Drop Vite 6 and 7 support;
+- Drop Node 20 support.
+
 ### v0.6.0
 
 - Supporting Vite 7.

package/README.md

@@ -18,8 +18,10 @@ the font downloaded by the user.
 
 ## Requirements
 
-- Node.js `^20 || ^22 || ^24`;
-- Vite `^6 || ^7`.
+- Node.js `^22 || ^24`;
+  - use the plugin version 0.6 for Node 20;
+- Vite `^8`
+  - use the plugin version 0.6 for Vite 6 and 7;
 
 ## Installation
 
@@ -34,7 +36,7 @@ Add it to the Vite configuration:
 ```ts
 // vite.config.ts
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import materialSymbols from "vite-plugin-material-symbols";
 
 export default defineConfig({
@@ -96,9 +98,17 @@ The plugin substitutes the `icon_names` URL parameter **ONLY** in `vite build` m
 The plugin accepts an object of the following options:
 
 ```yaml
+moduleIdRegex:
+  type: RegExp
+  description: The regex to match module IDs that should be processed for finding icon names
+  default: /\.([jt])sx?$/i # *.js, *.jsx, *.ts, *.tsx
+jsxNodeRegex:
+  type: RegExp
+  description: The regex to match JSX nodes that should be processed in parsed AST (e.g. "jsx", "_jsx" or "jsxs")
+  default: /jsx/
 component:
-  type: string
-  description: The name of JSX component to obtain the icon names from
+  type: string | RegExp
+  description: The name of JSX component to get the icon names from (or regex to match the component name)
   default: Icon
 getUrl:
   type: function

package/dist/index.d.ts

@@ -2,6 +2,16 @@ import { Plugin } from "vite";
 
 //#region src/index.d.ts
 type PluginOptions = {
+  /**
+   * The regex to match module IDs that should be processed for finding icon names
+   * @default /\.([jt])sx?$/i
+   * */
+  moduleIdRegex: RegExp;
+  /**
+   * The regex to match JSX nodes that should be processed in parsed AST (e.g. "jsx", "_jsx" or "jsxs")
+   * @default /jsx/
+   * */
+  jsxNodeRegex: RegExp;
   /**
    * Material Symbols CSS Provider. Default: outlined, no infill, 24px, weight 400
    * @see https://fonts.google.com/icons?icon.set=Material+Symbols
@@ -9,10 +19,10 @@ type PluginOptions = {
    * */
   getUrl: (iconNamesParam: string) => string;
   /**
-   * The name of JSX component to obtain the icon names from
+   * The name of JSX component to get the icon names from (or regex to match the component name)
    * @default Icon
    * */
-  component: string;
+  component: string | RegExp;
   /**
    * Enables higher priority for loading symbols
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
@@ -22,6 +32,8 @@ type PluginOptions = {
   preload: boolean;
 };
 declare const plugin: ({
+  moduleIdRegex,
+  jsxNodeRegex,
   component,
   getUrl,
   preload

package/dist/index.js

@@ -1 +1 @@
-import e from"esquery";const t=e=>e.type===`Literal`&&`value`in e&&typeof e.value==`string`,n=e=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${e}`,r=e=>[`CallExpression[callee.name='jsx'][arguments.0.name='${e}']`,`.arguments`,`Property[key.name='children'] Literal`].join(` > `),i=e=>{if(!e.size)return``;let t=[];for(let n of e.values())t.push(n);return`icon_names=${t.toSorted().join(`,`)}`},a=({component:a=`Icon`,getUrl:o=n,preload:s=!1}={})=>{let c=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:n,ast:i}){if(!i)return;let o=e.query(i,r(a)).filter(t);for(let{value:e}of o)this.debug({id:n,message:e}),c.add(e)},transformIndexHtml:e=>{let t=o(i(c)),n=[{injectTo:`head`,tag:`link`,attrs:{rel:`stylesheet`,href:t}}];return s&&n.push({injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preload`,as:`style`,href:t}},{injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preconnect`,href:`https://fonts.gstatic.com`}}),{html:e,tags:n}}}};var o=a;export{o as default};
+import e from"esquery";const t=e=>e.type===`Literal`&&`value`in e&&typeof e.value==`string`,n=e=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${e}`,r=(e,t)=>[`CallExpression[callee.name=${`/${e.source}/${e.flags}`}][arguments.0.name=${typeof t==`string`?`'${t}'`:`/${t.source}/${t.flags}`}]`,`.arguments`,`Property[key.name='children'] Literal`].join(` > `),i=e=>{if(!e.size)return``;let t=[];for(let n of e.values())t.push(n);return`icon_names=${t.toSorted().join(`,`)}`},a=({moduleIdRegex:a=/.([jt])sx?$/i,jsxNodeRegex:o=/jsx/,component:s=`Icon`,getUrl:c=n,preload:l=!1}={})=>{let u=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:n,code:i}){if(!i||!a.test(n))return;let c=this.parse(i),l=r(o,s),d=e.query(c,l).filter(t);for(let{value:e}of d)this.debug({id:n,message:e}),u.add(e)},transformIndexHtml:e=>{let t=c(i(u)),n=[{injectTo:`head`,tag:`link`,attrs:{rel:`stylesheet`,href:t}}];return l&&n.push({injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preload`,as:`style`,href:t}},{injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preconnect`,href:`https://fonts.gstatic.com`}}),{html:e,tags:n}}}};export{a as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-material-symbols",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Selective loading of Material Symbols for production",
   "main": "dist/index.js",
   "repository": {
@@ -13,8 +13,7 @@
   "scripts": {
     "lint": "bun run biome check",
     "prebuild": "tsc --noEmit",
-    "build": "tsdown",
-    "postbuild": "attw --pack --profile esm-only",
+    "build": "bunx --bun tsdown",
     "mdfix": "bunx --bun prettier *.md --write",
     "version": "bun run tools/version.ts",
     "prepublishOnly": "bun lint && bun test && bun run build"
@@ -30,28 +29,28 @@
     "*.md"
   ],
   "engines": {
-    "node": "^20 || ^22 || ^24"
+    "node": "^22 || ^24"
   },
   "peerDependencies": {
-    "vite": "^6.0.0 || ^7.0.0"
+    "vite": "^8.0.0"
   },
   "dependencies": {
-    "esquery": "^1.6.0"
+    "esquery": "^1.7.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@biomejs/biome": "2.0.5",
+    "@arethetypeswrong/core": "^0.18.2",
+    "@biomejs/biome": "2.4.7",
     "@tsconfig/bun": "^1.0.8",
     "@types/bun": "^1.2.17",
     "@types/esquery": "^1.5.4",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/semver": "^7.7.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "semver": "^7.7.2",
-    "tsdown": "^0.12.8",
+    "tsdown": "^0.21.2",
     "typescript": "^5.8.3"
   },
   "keywords": [