@badrap/material-symbols-omnibus - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "@badrap/material-symbols-omnibus",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
@@ -19,2 +19,5 @@ "description": "",
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
@@ -24,3 +27,3 @@ "lint": "eslint --max-warnings 0 .",
     "build": "rm -rf dist/* && tsc -p ./tsconfig.build.json",
-    "update": "rm -rf data/* && node --loader ts-node/esm scripts/update.ts > data/symbols.json",
+    "generate": "rm -rf data/* && node --loader ts-node/esm scripts/generate.ts > src/_data.ts",
     "prepack": "npm run build",
@@ -42,3 +45,2 @@ "changeset": "changeset",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
@@ -52,6 +54,3 @@ "@typescript-eslint/parser": "^7.7.1",
     "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0"
   }
 }

README.md

@@ -6,3 +6,3 @@ # @badrap/material-symbols-omnibus
 
-A React component to render [Material Symbol icons](https://fonts.google.com/icons) as SVG.
+A library to resolve a [Material Symbol icons](https://fonts.google.com/icons) name to an SVG path.
 
@@ -19,13 +19,16 @@ The icons are the outlined variant with the 48px optical size. The icon can either be unfilled or filled.
 
-```ts
-import { MaterialSymbol } from "@badrap/material-symbols-omnibus";
+```tsx
+import { resolveMaterialSymbol } from "@badrap/material-symbols-omnibus";
 
-// Render the Account Circle icon, with an optional className.
-<MaterialSymbol name="account_circle" className="symbol" />
-
-// Render the filled variant of the Account Circle icon.
-<MaterialSymbol name="account_circle" filled />
-
-// Render a fallback if the given icon name does not exist.
-<MaterialSymbol name="no_such_symbol" fallback={<div>no such symbol</div>} />
+export function MaterialSymbol(props: { name: string; filled?: boolean }) {
+  const data = resolveMaterialSymbol(props);
+  if (!data) {
+    return null;
+  }
+  return (
+    <svg width={data.width} height={data.height} viewBox={data.viewBox}>
+      <path d={data.path} />
+    </svg>
+  );
+}
 ```
@@ -32,0 +35,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5438674

increased by114.26%

Dependency count

0

decreased by-100%

Dev dependency count

12

decreased by-7.69%

Number of package files

11

increased by37.5%

Lines of code

40673

increased by341.23%

Number of lines in readme file

37

increased by8.82%

No dependency changes