vite-plugin-material-symbols 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +16 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  ## Version 0
4
4
 
5
+ ### v0.2.2
6
+
7
+ - Performance improvement:
8
+ - using `for..of` and `Array::push()` instead of `Array::from()`.
9
+ - Extracted helpers to make the plugin code more readable.
10
+
5
11
  ### v0.2.1
6
12
 
7
13
  - Improving documentation;
package/README.md CHANGED
@@ -48,6 +48,22 @@ Add the following line to the `<head>` of your `index.html`:
48
48
  <link href="__MATERIAL_SYMBOLS__" rel="stylesheet" />
49
49
  ```
50
50
 
51
+ Ensure assigning the [required](https://developers.google.com/fonts/docs/material_symbols) `className` to your icons.
52
+ When using Material UI it can be [globally configured](https://mui.com/material-ui/customization/theme-components/):
53
+
54
+ ```ts
55
+ const theme = createTheme({
56
+ components: {
57
+ MuiIcon: {
58
+ defaultProps: {
59
+ /* @see https://fonts.google.com/icons?icon.set=Material+Symbols */
60
+ className: "material-symbols-outlined", // or -rounded or -sharp
61
+ },
62
+ },
63
+ },
64
+ });
65
+ ```
66
+
51
67
  ## Usage
52
68
 
53
69
  Consider a sample React component using MUI Icon:
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import esquery from "esquery";const plugin=({placeholder:d="__MATERIAL_SYMBOLS__",component:e="Icon",getUrl:f=(h)=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${h}`}={})=>{const g=new Set();return {name:"material-symbols",enforce:"pre",moduleParsed:function({id:h,ast:i}){if(!i)return;const j=esquery.query(i,`CallExpression[callee.name='jsx'][arguments.0.name='${e}'] > .arguments > Property[key.name='children'] Literal`);for(const {value:k}of j)if(typeof k==="string")this.debug({id:h,message:k}),g.add(k)},transformIndexHtml:(h)=>h.replace(d,f(g.size?`icon_names=${Array.from(g.values()).toSorted().join(",")}`:""))}};var src_default=plugin;export {src_default as default};
1
+ import esquery from "esquery";const isStringLiteral=(h)=>h.type==="Literal"&&"value"in h&&typeof h.value==="string",defaultUrlProvider=(h)=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${h}`,makeSelector=(h)=>[`CallExpression[callee.name='jsx'][arguments.0.name='${h}']`,".arguments","Property[key.name='children'] Literal"].join(" > "),makeIconNamesParam=(h)=>{if(!h.size)return "";const i=[];for(const j of h.values())i.push(j);return `icon_names=${i.toSorted().join(",")}`},plugin=({placeholder:h="__MATERIAL_SYMBOLS__",component:i="Icon",getUrl:j=defaultUrlProvider}={})=>{const k=new Set();return {name:"material-symbols",enforce:"pre",moduleParsed:function({id:l,ast:m}){if(!m)return;const n=esquery.query(m,makeSelector(i)).filter(isStringLiteral);for(const {value:o}of n)this.debug({id:l,message:o}),k.add(o)},transformIndexHtml:(l)=>l.replace(h,j(makeIconNamesParam(k)))}};var src_default=plugin;export {src_default as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-material-symbols",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Selective loading of Material Symbols for production",
5
5
  "main": "dist/index.js",
6
6
  "repository": {
@@ -16,7 +16,7 @@
16
16
  "build": "tsdown",
17
17
  "postbuild": "attw --pack --profile esm-only",
18
18
  "mdfix": "bunx --bun prettier *.md --write",
19
- "version": "bun run version.ts",
19
+ "version": "bun run tools/version.ts",
20
20
  "prepublishOnly": "bun lint && bun test && bun run build"
21
21
  },
22
22
  "exports": {