vite-plugin-material-symbols 0.2.1 → 0.3.0-beta.1

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 (5) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +16 -8
  3. package/dist/index.d.ts +5 -8
  4. package/dist/index.js +1 -1
  5. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  ## Version 0
4
4
 
5
+ ### v0.3.0
6
+
7
+ - Fixed the leading slash problem in `dev` mode (serve mode);
8
+ - The `placeholder` option removed;
9
+ - Placing the `<link>` tag into `index.html` is no longer required:
10
+ - The plugin will add `<link>` tag to the `<head>` by itself.
11
+
12
+ ### v0.2.2
13
+
14
+ - Performance improvement:
15
+ - using `for..of` and `Array::push()` instead of `Array::from()`.
16
+ - Extracted helpers to make the plugin code more readable.
17
+
5
18
  ### v0.2.1
6
19
 
7
20
  - Improving documentation;
package/README.md CHANGED
@@ -42,10 +42,22 @@ export default defineConfig({
42
42
  });
43
43
  ```
44
44
 
45
- Add the following line to the `<head>` of your `index.html`:
45
+ Ensure having `<head>` tag in your `index.html`.
46
46
 
47
- ```html
48
- <link href="__MATERIAL_SYMBOLS__" rel="stylesheet" />
47
+ Ensure assigning the [required](https://developers.google.com/fonts/docs/material_symbols) `className` to your icons.
48
+ When using Material UI it can be [globally configured](https://mui.com/material-ui/customization/theme-components/):
49
+
50
+ ```ts
51
+ const theme = createTheme({
52
+ components: {
53
+ MuiIcon: {
54
+ defaultProps: {
55
+ /* @see https://fonts.google.com/icons?icon.set=Material+Symbols */
56
+ className: "material-symbols-outlined", // or -rounded or -sharp
57
+ },
58
+ },
59
+ },
60
+ });
49
61
  ```
50
62
 
51
63
  ## Usage
@@ -65,7 +77,7 @@ const Component = () => (
65
77
  );
66
78
  ```
67
79
 
68
- After running `vite build`, that link will have the URL of Material Symbols having the list of required icon names:
80
+ After running `vite build`, the `<link>` tag will be added to your `index.html` having the list of required icon names:
69
81
 
70
82
  ```html
71
83
  <link
@@ -88,10 +100,6 @@ component:
88
100
  type: string
89
101
  description: The name of JSX component to obtain the icon names from
90
102
  default: Icon
91
- placeholder:
92
- type: string
93
- description: The text within index.html that should be replaced
94
- default: __MATERIAL_SYMBOLS__
95
103
  getUrl:
96
104
  type: function
97
105
  description: Material Symbols CSS Provider
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import type { Plugin } from "vite";
1
+ import { Plugin } from 'vite';
2
+
2
3
  type PluginOptions = {
3
4
  /**
4
5
  * Material Symbols CSS Provider. Default: outlined, no infill, 24px, weight 400
@@ -6,16 +7,12 @@ type PluginOptions = {
6
7
  * @default () => `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined...&${iconNamesParam}`
7
8
  * */
8
9
  getUrl: (iconNamesParam: string) => string;
9
- /**
10
- * The text within index.html that should be replaced
11
- * @default __MATERIAL_SYMBOLS__
12
- * */
13
- placeholder: string;
14
10
  /**
15
11
  * The name of JSX component to obtain the icon names from
16
12
  * @default Icon
17
13
  * */
18
14
  component: string;
19
15
  };
20
- declare const plugin: ({ placeholder, component, getUrl, }?: Partial<PluginOptions>) => Plugin;
21
- export default plugin;
16
+ declare const plugin: ({ component, getUrl, }?: Partial<PluginOptions>) => Plugin;
17
+
18
+ export { plugin as default };
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=({component:h="Icon",getUrl:i=defaultUrlProvider}={})=>{const j=new Set();return {name:"material-symbols",enforce:"pre",moduleParsed:function({id:k,ast:l}){if(!l)return;const m=esquery.query(l,makeSelector(h)).filter(isStringLiteral);for(const {value:n}of m)this.debug({id:k,message:n}),j.add(n)},transformIndexHtml:(k)=>({html:k,tags:[{injectTo:"head",tag:`<link rel="stylesheet" href="${i(makeIconNamesParam(j))}" />`}]})}};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.3.0-beta.1",
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": {
@@ -44,14 +44,14 @@
44
44
  "@tsconfig/bun": "^1.0.7",
45
45
  "@types/bun": "^1.1.14",
46
46
  "@types/esquery": "^1.5.4",
47
- "@types/react": "^18.3.12",
48
- "@types/react-dom": "^18.3.1",
47
+ "@types/react": "^19.0.0",
48
+ "@types/react-dom": "^19.0.0",
49
49
  "@types/semver": "^7.5.8",
50
50
  "@vitejs/plugin-react-swc": "^3.7.2",
51
- "react": "^18.3.1",
52
- "react-dom": "^18.3.1",
51
+ "react": "^19.0.0",
52
+ "react-dom": "^19.0.0",
53
53
  "semver": "^7.6.3",
54
- "tsdown": "^0.3.1",
54
+ "tsdown": "^0.5.0",
55
55
  "typescript": "^5.7.2"
56
56
  },
57
57
  "keywords": [