vite-plugin-material-symbols 0.7.1 → 0.8.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Version 0
 
+### v0.8.0
+
+- Replaced `getUrl` option with two new ones:
+  - `fontUrl` (string): Material Symbols CSS Provider;
+  - `paramName` (string): The name of the query parameter to add to the `fontUrl` (default: "icon_names");
+  - The plugin will automatically add the query parameter with the icon names list to the font URL.
+
 ### v0.7.1
 
 - Added the following configuration options for flexibility:

package/README.md

@@ -28,7 +28,7 @@ the font downloaded by the user.
 Install the plugin using your favourite package manager, for example:
 
 ```shell
-yarn add -D vite-plugin-material-symbols
+pnpm add -D vite-plugin-material-symbols
 ```
 
 Add it to the Vite configuration:
@@ -110,13 +110,15 @@ component:
   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
+fontUrl:
+  type: string
   description: Material Symbols CSS Provider
-  arguments: [string] # icon_names parameter
-  exampleArguments: ["icon_names=chevron_right,comment,home"] # can be empty string
-  returns: string # the URL
-  default: (iconNamesParam) => `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${iconNamesParam}`
+  # Standard settings: Outlined, no infill, 24px, weight 400
+  default: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0
+paramName:
+  type: string
+  description: The name of the query parameter to add to the fontUrl
+  default: icon_names
 preload:
   type: boolean
   description: Enables higher priority for loading symbols

package/dist/index.d.ts

@@ -15,12 +15,17 @@ type PluginOptions = {
   /**
    * Material Symbols CSS Provider. Default: outlined, no infill, 24px, weight 400
    * @see https://fonts.google.com/icons?icon.set=Material+Symbols
-   * @default () => `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined...&${iconNamesParam}`
+   * @default "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
    * */
-  getUrl: (iconNamesParam: string) => string;
+  fontUrl: string;
+  /**
+   * The name of the query parameter to add to the fontUrl
+   * @default "icon_names"
+   * */
+  paramName: string;
   /**
    * The name of JSX component to get the icon names from (or regex to match the component name)
-   * @default Icon
+   * @default "Icon"
    * */
   component: string | RegExp;
   /**
@@ -35,7 +40,8 @@ declare const plugin: ({
   moduleIdRegex,
   jsxNodeRegex,
   component,
-  getUrl,
+  fontUrl,
+  paramName,
   preload
 }?: Partial<PluginOptions>) => Plugin;
 //#endregion

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,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};
+import e from"esquery";const t=e=>e.type===`Literal`&&`value`in e&&typeof e.value==`string`,n=(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(` > `),r=(e,t,n)=>{let r=new URL(e);if(n.size){let e=[];for(let t of n.values())e.push(t);r.searchParams.append(t,e.toSorted().join(`,`))}return decodeURIComponent(r.toString())},i=({moduleIdRegex:i=/.([jt])sx?$/i,jsxNodeRegex:a=/jsx/,component:o=`Icon`,fontUrl:s=`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0`,paramName:c=`icon_names`,preload:l=!1}={})=>{let u=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:r,code:s}){if(!s||!i.test(r))return;let c=this.parse(s),l=n(a,o),d=e.query(c,l).filter(t);for(let{value:e}of d)this.debug({id:r,message:e}),u.add(e)},transformIndexHtml:e=>{let t=r(s,c,u).toString(),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{i as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-material-symbols",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "Selective loading of Material Symbols for production",
   "main": "dist/index.js",
   "repository": {
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.2",
-    "@biomejs/biome": "2.4.7",
+    "@biomejs/biome": "2.4.15",
     "@tsconfig/bun": "^1.0.8",
     "@types/bun": "^1.2.17",
     "@types/esquery": "^1.5.4",
@@ -51,7 +51,7 @@
     "react-dom": "^19.1.0",
     "semver": "^7.7.2",
     "tsdown": "^0.21.2",
-    "typescript": "^5.8.3"
+    "typescript": "^6.0.0"
   },
   "keywords": [
     "css",
@@ -68,6 +68,7 @@
     "icon",
     "font-icons",
     "vite",
-    "vitejs"
+    "vitejs",
+    "vite-plugin"
   ]
 }