{"_id":"@ailabs-yating/react-material-symbols-w400-s24-outlined","_rev":"2-121f7d023ce1d006b6cba4df955be7db","name":"@ailabs-yating/react-material-symbols-w400-s24-outlined","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@ailabs-yating/react-material-symbols-w400-s24-outlined","version":"1.0.1","author":{"name":"ailabs-yating"},"license":"MIT","_id":"@ailabs-yating/react-material-symbols-w400-s24-outlined@1.0.1","maintainers":[{"name":"gmin_chen","email":"gmin.chen@ailabs.tw"},{"name":"dennis-chung-ailabs","email":"lian.chung@ailabs.tw"}],"homepage":"https://github.com/TaiwanAILabs-Yating/react-icons-set#readme","bugs":{"url":"https://github.com/TaiwanAILabs-Yating/react-icons-set/issues"},"dist":{"shasum":"e4979bde2120306c7e9832ba51063dfcc89789a9","tarball":"https://registry.npmjs.org/@ailabs-yating/react-material-symbols-w400-s24-outlined/-/react-material-symbols-w400-s24-outlined-1.0.1.tgz","fileCount":6,"integrity":"sha512-AJC8agDuA4ate5JYERWxZqi5jBDsR0Rcn1u47QiPMe+5GttTaLjTseMyfbtyMjFmPfwXsfI5/CHjUGeIHpC5hw==","signatures":[{"sig":"MEUCIQCAJwIMLa+XfhY5aoq3PjD94JadlyJeYBusC1lGyh5gVgIgejUjZOtJMTLsk1ZtuH57cHeVgq/sXitJpTwtlaEnOhk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15175407},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"8f651dfac5b4bf23f89f03ae4b32d8452eb18f7d","scripts":{"build":"NODE_OPTIONS=--max-old-space-size=8192 vite build","clean":"rm -rf dist && rm -rf ./src/output && rm -rf ./src/icon-sources","select":"tsx ./src/select.ts","download":"tsx ./src/download.ts","generate":"tsx ./src/main.ts","luck-ball-go":"npm run download && npm run generate && npm run build"},"_npmUser":{"name":"dennis-chung-ailabs","email":"lian.chung@ailabs.tw"},"repository":{"url":"git+https://github.com/TaiwanAILabs-Yating/react-icons-set.git","type":"git"},"_npmVersion":"10.9.2","description":"A comprehensive React icon set featuring Material Symbols. Each icon is typed with an embedded base64 image, enabling IDEs to display a visual preview on hover for an enhanced developer experience.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.3","vite":"^7.0.6","react":"^19.1.1","prompts":"^2.4.2","typescript":"^5.9.2","@types/node":"^24.2.0","@types/react":"^19.1.9","@types/prompts":"^2.4.9","vite-plugin-dts":"^4.5.4","vite-plugin-svgr":"^4.3.0"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-material-symbols-w400-s24-outlined_1.0.1_1754556661358_0.1770894877349507","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ailabs-yating/react-material-symbols-w400-s24-outlined","version":"1.0.2","author":{"name":"ailabs-yating"},"license":"MIT","description":"A comprehensive React icon set featuring Material Symbols. Each icon is typed with an embedded base64 image, enabling IDEs to display a visual preview on hover for an enhanced developer experience.","repository":{"type":"git","url":"git+https://github.com/TaiwanAILabs-Yating/react-icons-set.git"},"scripts":{"select":"tsx ./src/select.ts","download":"tsx ./src/download.ts","generate":"tsx ./src/main.ts","build":"NODE_OPTIONS=--max-old-space-size=8192 vite build","clean":"rm -rf dist && rm -rf ./src/output && rm -rf ./src/icon-sources","luck-ball-go":"npm run download && npm run generate && npm run build"},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"sideEffects":false,"devDependencies":{"@types/node":"^24.2.0","@types/prompts":"^2.4.9","@types/react":"^19.1.9","prompts":"^2.4.2","react":"^19.1.1","tsx":"^4.20.3","typescript":"^5.9.2","vite":"^7.0.6","vite-plugin-dts":"^4.5.4","vite-plugin-svgr":"^4.3.0"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_id":"@ailabs-yating/react-material-symbols-w400-s24-outlined@1.0.2","gitHead":"c384ea5716c84754403aa9034d605c616ed55720","bugs":{"url":"https://github.com/TaiwanAILabs-Yating/react-icons-set/issues"},"homepage":"https://github.com/TaiwanAILabs-Yating/react-icons-set#readme","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-q+C6mQvnnGdDfT0abRIfJkEQZvHB0bn1KkpYJsa8TXBUNFaWQfLay6TE2jXoqdnW/6KHVKUUDNbyMFEN8do2ig==","shasum":"c07b5ebb926549f840305077dce1f128e468b78c","tarball":"https://registry.npmjs.org/@ailabs-yating/react-material-symbols-w400-s24-outlined/-/react-material-symbols-w400-s24-outlined-1.0.2.tgz","fileCount":6,"unpackedSize":15804438,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBZ1xxyodzckRkaj9gMRUzczhWs40tW5qUCqDYf5VzrAAiEA21T6se+y4o8Hi7wRfsnt1VHI3JgL1O5/9Ug+wb7eZm4="}]},"_npmUser":{"name":"dennis-chung-ailabs","email":"lian.chung@ailabs.tw"},"directories":{},"maintainers":[{"name":"gmin_chen","email":"gmin.chen@ailabs.tw"},{"name":"dennis-chung-ailabs","email":"lian.chung@ailabs.tw"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-material-symbols-w400-s24-outlined_1.0.2_1754558531419_0.2731816986688782"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-07T08:51:01.202Z","modified":"2025-08-07T09:22:11.799Z","1.0.1":"2025-08-07T08:51:01.616Z","1.0.2":"2025-08-07T09:22:11.613Z"},"bugs":{"url":"https://github.com/TaiwanAILabs-Yating/react-icons-set/issues"},"author":{"name":"ailabs-yating"},"license":"MIT","homepage":"https://github.com/TaiwanAILabs-Yating/react-icons-set#readme","repository":{"type":"git","url":"git+https://github.com/TaiwanAILabs-Yating/react-icons-set.git"},"description":"A comprehensive React icon set featuring Material Symbols. Each icon is typed with an embedded base64 image, enabling IDEs to display a visual preview on hover for an enhanced developer experience.","maintainers":[{"name":"gmin_chen","email":"gmin.chen@ailabs.tw"},{"name":"dennis-chung-ailabs","email":"lian.chung@ailabs.tw"}],"readme":"# Material Symbols for React\n\nA comprehensive library of Material Symbols for React, offering both normal and filled icon sets in a single, easy-to-use package.\n\n## Installation\n\nInstall your desired package variant using npm or yarn:\n\n```bash\nnpm install @ailabs-yating/react-material-symbols-w400-s24-rounded\n```\n\n**Available Variants:**\n\n- `@ailabs-yating/react-material-symbols-w400-s24-rounded`\n- `@ailabs-yating/react-material-symbols-w400-s24-outlined`\n\n> **Note:** You can also build the library from source and install it locally. See the [Build Process](#build-process) section for details.\n\n## Usage\n\nImport the desired icon and use it in your React components.\n\n```jsx\nimport React from \"react\";\nimport { IconSearchFill } from \"@ailabs-yating/react-material-symbols-w400-s24-rounded\";\n\nconst App = () => {\n  return (\n    <div>\n      <h1>Welcome to my React App</h1>\n      <IconSearchFill fontSize={16} className=\"text-red-500\" />\n    </div>\n  );\n};\n\nexport default App;\n```\n\nEach icon package contains two styles: normal and filled. The filled version has a `Fill` suffix.\n\n- **Normal:** `<IconSearch />` (fill=`0`)\n- **Filled:** `<IconSearchFill />` (fill=`1`)\n\n## SVG Configuration\n\nThe icons are processed by [SVGR](https://react-svgr.com/) with the following default settings to ensure they are optimized and accessible:\n\n```js\n{\n    \"icon\": true,          // Sets width and height to 1em\n    \"svgProps\": {\n      \"fill\": \"currentColor\", // Inherits color from the parent's CSS\n      \"aria-hidden\": true   // Hides decorative icons from screen readers\n    }\n}\n```\n\n## Build Process\n\nTo build the library from source, follow these steps:\n\n1.  **Install Dependencies**\n\n    ```bash\n    npm install\n    ```\n\n2.  **Select Icon Variant**\n    Run the interactive script to choose your desired icon settings.\n\n    ```bash\n    npm run select\n    ```\n\n3.  **Build the Library**\n    This command will download the SVGs, generate the React components, and bundle the package.\n\n    ```bash\n    npm run lucky-ball-go\n    ```\n\n    Alternatively, you can run the steps individually:\n\n    ```bash\n    npm run download # Download SVGs\n    npm run generate # Generate component files\n    npm run build    # Bundle the package with Vite/Rollup\n    ```\n\n4.  **Package the Library**\n    Before packing, you may want to edit `package.json` to set a custom package name.\n\n    ```bash\n    npm pack\n    ```\n\n5.  **Install Locally in Your Project**\n    Move the generated `.tgz` file to your project's root directory and install it.\n    ```bash\n    # Example command\n    npm install ./ailabs-yating-react-material-symbols-w400-s24-outlined-1.0.1.tgz\n    ```\n\n> **Important:** Some `.gitignore` configurations exclude `*.tgz` files. If you intend to commit the local package to your repository, you may need to explicitly add it using `git add -f <your-package-file.tgz>`.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Acknowledgements\n\nThis library is inspired by `lucide-react` and `material-symbols/svg`. It includes JSDoc annotations that allow modern IDEs to display a preview of the SVG icon on hover.\n","readmeFilename":"README.md"}