{"_id":"@damisparks/material-symbols","name":"@damisparks/material-symbols","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@damisparks/material-symbols","version":"1.0.0","description":"React components implementing the Material UI component SvgIcon using the Material Symbols Rounded icons from Google Fonts","repository":{"type":"git","url":"git+https://github.com/damisparks/material-symbols.git"},"sideEffects":false,"engines":{"node":"^18.18.0 || ^20.9.0 || >=22.0.0"},"keywords":[],"author":{"name":"Dami Sparks","email":"rethinkwithdami@gmail.com","url":"https://damisparks.com"},"license":"MIT","devDependencies":{"@eslint/js":"^9.24.0","@material-symbols/svg-300":"^0.30.0","@mui/material":"^7.0.2","@types/node":"^22.14.0","eslint":"^9.24.0","eslint-plugin-comment-length":"^2.2.1","eslint-plugin-import-x":"^4.10.2","eslint-plugin-jsdoc":"^50.6.9","eslint-plugin-optimal-modules":"^3.0.0","eslint-plugin-simple-import-sort":"^12.1.1","typescript":"^5.8.3","typescript-eslint":"^8.29.1"},"peerDependencies":{"@mui/material":"6 - 7","react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"scripts":{"lint":"eslint .","build":"node build-material-symbols.mjs","typecheck":"tsc -p jsconfig.json","check":"pnpm run lint && pnpm run typecheck"},"_id":"@damisparks/material-symbols@1.0.0","bugs":{"url":"https://github.com/damisparks/material-symbols/issues"},"homepage":"https://github.com/damisparks/material-symbols#readme","_integrity":"sha512-UrzbStML+DyLoeld3tSTqXGsTWUtFIPnmQ9KZfYMEBiRmV2zgDOzk4BW5jREan5BVt/DhS7ZWu9sYWpqaIE8HA==","_resolved":"/private/var/folders/sv/0wbt45956lq588ytyrpk9sm40000gq/T/788c4c98c619b566ca21e90883421069/damisparks-material-symbols-1.0.0.tgz","_from":"file:damisparks-material-symbols-1.0.0.tgz","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-UrzbStML+DyLoeld3tSTqXGsTWUtFIPnmQ9KZfYMEBiRmV2zgDOzk4BW5jREan5BVt/DhS7ZWu9sYWpqaIE8HA==","shasum":"6a857899a1d3afec7cd8204d9deca5d4ddd03013","tarball":"https://registry.npmjs.org/@damisparks/material-symbols/-/material-symbols-1.0.0.tgz","fileCount":7183,"unpackedSize":22769814,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD/uqSiyFmDbJoaPmUZcuRW0Wmx8fsAdpez95BrnB/NTQIgc9ISAR9Zm0mA7QeDfVPeuFknlFH2Mpuj8kyeGPXAPVo="}]},"_npmUser":{"name":"damisparks","email":"rethinkwithdami@gmail.com"},"directories":{},"maintainers":[{"name":"damisparks","email":"rethinkwithdami@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/material-symbols_1.0.0_1744396138048_0.31021302222682046"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-11T18:28:57.989Z","1.0.0":"2025-04-11T18:28:58.435Z","modified":"2025-04-11T18:28:58.657Z"},"maintainers":[{"name":"damisparks","email":"rethinkwithdami@gmail.com"}],"description":"React components implementing the Material UI component SvgIcon using the Material Symbols Rounded icons from Google Fonts","homepage":"https://github.com/damisparks/material-symbols#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/damisparks/material-symbols.git"},"author":{"name":"Dami Sparks","email":"rethinkwithdami@gmail.com","url":"https://damisparks.com"},"bugs":{"url":"https://github.com/damisparks/material-symbols/issues"},"license":"MIT","readme":"# @damisparks/material-symbols\n\n`@damisparks/material-symbols` includes the 2100+ [Material Symbols Rounded icons](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Rounded) from Google Fonts converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components for seamless integration with Material UI applications.\n\n## Installation\n\nTo install in an existing Node.js, React, and Material UI project:\n\n1. [Install Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) versions according to the [_**Requirements**_](#requirements).\n2. Install the `@damisparks/material-symbols` package using your preferred package manager. Using [pnpm](https://pnpm.io/):\n\n    ```sh\n    pnpm add @damisparks/material-symbols\n    ```\n\n## Usage\n\nThe package doesn't have a main index module, so use deep imports (using the file extension `.mjs`) from the ECMAScript modules that are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):\n\n- `icons/material-symbols`: Modules each named `IconMaterialSymbols` + the [Google Material Symbols](https://fonts.google.com/icons) icon name in pascal case + `Fill` (optionally, if the icon has a fill variant) or `OutlineRounded` (optionally, if the icon has a rounded variant) + `.mjs`, default exporting a React component implementing the [Material UI](https://mui.com/material-ui) component [`SvgIcon`](https://mui.com/material-ui/api/svg-icon). Example:\n\n  ```js\n  import MaterialSymbolsIconKeyboardArrowDownOutlineRounded from \"@damisparks/material-symbols/icons/material-symbols/MaterialSymbolsIconKeyboardArrowDownOutlineRounded.mjs\";\n  ```\n\n## Requirements\n\nSupported runtime environments:\n\n- [Node.js](https://nodejs.org) versions `^18.18.0 || ^20.9.0 || >=22.0.0`.\n- Browsers matching the [Browserslist](https://browsersl.ist) query [`> 0.5%, not OperaMini all, not dead`](https://browsersl.ist/#q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).\n\nSupported TypeScript versions: v5+.\n\n> [!WARNING]\n> While this package has correct [ESM for Node.js and TypeScript](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-format-detection), the [Material UI dependencies don’t](https://github.com/mui/material-ui/issues/30671). Until this is fixed upstream, instead of the correct TypeScript config of [`compilerOptions.module`](https://www.typescriptlang.org/tsconfig#module) set to [`\"nodenext\"`](https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext), projects must set [`\"preserve\"`](https://www.typescriptlang.org/docs/handbook/modules/reference.html#preserve), and must use a bundler (e.g. [esbuild](https://esbuild.github.io) or [webpack](https://webpack.js.org)) to consume this package as Node.js and browsers can’t run it directly. Bundlers have to be specially configured to be able to resolve the non standard ESM dependencies.\n\n## Scripts\n\nThese CLI scripts are used to install, build, serve, and quality check the project.\n\n### Install script\n\nTo install dependencies:\n\n```sh\npnpm install\n```\n\n### Prepare script\n\nTo prepare build artifacts so the repo can be used as an installed package:\n\n```sh\npnpm prepare\n```\n\n\nThis [npm life cycle script](https://docs.npmjs.com/cli/v10/using-npm/scripts#life-cycle-scripts) is automatically used by the npm CLI in certain situations and isn’t for manual use (instead see [**_Build script_**](#build-script)). It allows the `@damisparks/material-symbols` package to be installed in a project via a [Git repo URL](https://docs.npmjs.com/cli/v10/using-npm/package-spec#git-urls); useful for testing forks or PR branches.\n\n### Build script\n\nTo build the project:\n\n```sh\npnpm build\n```\n### Check script\n\nTo check the project for linting errors and formatting issues:\n\n```sh\npnpm check\n```\n\n### ESLint script\n\nTo run ESLint:\n\n```sh\npnpm lint\n```\n\n### Type check script\n\nTo type check the project:\n\n```sh\npnpm typecheck\n```\n","readmeFilename":"README.md","_rev":"1-9367f7a3c626752986b7a23f1ebb491a"}