{"_id":"@add-bulgaria/fluenticons","_rev":"2-af1d4bde171506f8116a835bf7e49020","name":"@add-bulgaria/fluenticons","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@add-bulgaria/fluenticons","version":"1.0.0","author":{"url":"https://www.add-bg.com","name":"ADD-Bulgaria"},"license":"MIT","_id":"@add-bulgaria/fluenticons@1.0.0","maintainers":[{"name":"vvalchovski","email":"vladimir@gridbit.tech"}],"dist":{"shasum":"5b1e0b778702d65bc2a19d51528c2c267d95340b","tarball":"https://registry.npmjs.org/@add-bulgaria/fluenticons/-/fluenticons-1.0.0.tgz","fileCount":2771,"integrity":"sha512-JgSKwIfmQcR+FutZKTn+HS/gx8Mkp3VQjH00R6UpO35P9WnwFzTZjhii3o+pYOq4y+OFg+WlQB8ZvHgOdTclfg==","signatures":[{"sig":"MEUCIE6ZWI2GsuyK9Ml+G0GC5HYeAz61Y9WtevCyCekjZTwwAiEA9MsAs01Zr2xwYHL/PsyuOcvSlJWUKxvcp8r4UDw66iw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9455407},"main":"./src/index.ts","type":"module","types":"./src/index.ts","gitHead":"15386bc2cdac2f68632639307b1542f3daf64573","private":false,"scripts":{"lint":"eslint .","build":"tsc --noEmit","generate:icons":"cross-env NODE_NO_WARNINGS=1 tsx ./scripts/generate-icons.ts"},"_npmUser":{"name":"vvalchovski","email":"vladimir@gridbit.tech"},"_npmVersion":"10.8.2","description":"[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\r ![TypeScript](https://img.shields.io/bad","directories":{},"_nodeVersion":"20.18.3","dependencies":{"react-colorful":"^5.6.1","prism-react-renderer":"^2.4.1"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","devDependencies":{"tsx":"^4.7.1","svgo":"^3.3.2","vite":"^6.2.0","yargs":"^17.7.2","eslint":"^9.21.0","globals":"^15.15.0","cross-env":"^7.0.3","fast-glob":"^3.3.3","@eslint/js":"^9.21.0","typescript":"^5.8.2","@types/node":"^22.14.0","@types/svgo":"^3.0.0","@types/react":"^18.2.0","@types/yargs":"^17.0.33","@types/react-dom":"^18.2.0","typescript-eslint":"^8.24.1","@vitejs/plugin-react-swc":"^3.8.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/fluenticons_1.0.0_1744127819219_0.5763868874436167","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@add-bulgaria/fluenticons","private":false,"version":"1.0.1","type":"module","main":"./src/index.ts","types":"./src/index.ts","author":{"name":"ADD-Bulgaria","url":"https://www.add-bg.com"},"license":"MIT","scripts":{"generate:icons":"cross-env NODE_NO_WARNINGS=1 tsx ./scripts/generate-icons.ts","build":"tsc --noEmit","lint":"eslint ."},"dependencies":{"prism-react-renderer":"^2.4.1","react-colorful":"^5.6.1"},"devDependencies":{"@eslint/js":"^9.21.0","@types/node":"^22.14.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@types/svgo":"^3.0.0","@types/yargs":"^17.0.33","@vitejs/plugin-react-swc":"^3.8.0","cross-env":"^7.0.3","eslint":"^9.21.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","fast-glob":"^3.3.3","globals":"^15.15.0","svgo":"^3.3.2","tsx":"^4.7.1","typescript":"^5.8.2","typescript-eslint":"^8.24.1","vite":"^6.2.0","yargs":"^17.7.2"},"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_id":"@add-bulgaria/fluenticons@1.0.1","gitHead":"15386bc2cdac2f68632639307b1542f3daf64573","description":"[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\r ![TypeScript](https://img.shields.io/bad","_nodeVersion":"20.18.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-nNtv4EvuoKiBFi2XoOMX8DL3gSB2rYfGHwpGUogDIrQ6hW/3vgG4SM2CJZ+/nQ4uWpJZ8B/ccfDKCS5durbvPQ==","shasum":"1e9e2903621a3f236c66a4790978fe3fe75e7ad7","tarball":"https://registry.npmjs.org/@add-bulgaria/fluenticons/-/fluenticons-1.0.1.tgz","fileCount":2771,"unpackedSize":9360615,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDzpmmp0ETrPhB+LoP2cFNKU9Fnz9Zk/5BcpYm6eTWkpAiAvsIzZmL5kv+wn/xhsta827he0q2U/E1/5NlVhX0K7aA=="}]},"_npmUser":{"name":"vvalchovski","email":"vladimir@gridbit.tech"},"directories":{},"maintainers":[{"name":"vvalchovski","email":"vladimir@gridbit.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fluenticons_1.0.1_1744129894531_0.797817255422808"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-08T15:56:59.128Z","modified":"2025-04-08T16:31:35.063Z","1.0.0":"2025-04-08T15:56:59.604Z","1.0.1":"2025-04-08T16:31:34.896Z"},"author":{"name":"ADD-Bulgaria","url":"https://www.add-bg.com"},"license":"MIT","description":"[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\r ![TypeScript](https://img.shields.io/bad","maintainers":[{"name":"vvalchovski","email":"vladimir@gridbit.tech"}],"readme":"# Fluenticons\r\n\r\n[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\r\n![TypeScript](https://img.shields.io/badge/TypeScript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)\r\n![Vite](https://img.shields.io/badge/Vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)\r\n![SWC](https://img.shields.io/badge/SWC-F0AB3D?style=for-the-badge&logo=swc&logoColor=black)\r\n\r\n**Fluenticons** is a React package that simplifies the integration of Microsoft Fluent Icons into your React applications. It takes the official Fluent Icons SVG files and transforms them into reusable React components with customizable properties.\r\n\r\n## Features\r\n\r\n* **Effortless Integration:** Easily use Microsoft Fluent Icons as React components.\r\n* **Customizable Properties:** Control the appearance of icons through various props (e.g., size, color, fill, stroke).\r\n* **Optimized Performance:** Built with Vite and SWC for fast builds and efficient code.\r\n* **TypeScript Support:** Provides excellent type safety and autocompletion for a better development experience.\r\n* **Based on Official Fluent Icons:** Stays up-to-date with the latest icons from Microsoft.\r\n\r\n## Installation\r\n\r\nYou can install `fluenticons` using npm or yarn:\r\n\r\n```bash\r\nnpm install fluenticons\r\n# or\r\nyarn add fluenticons\r\n```\r\n\r\n## Usage\r\nHere's a basic example of how to use a Fluent Icon in your React component:\r\n```typescript\r\nimport { HomeRegular } from 'fluenticons';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <div>\r\n      <HomeRegular size={24} primaryFill=\"blue\" />\r\n      {/* You can also use secondaryFill, stroke, and other props */}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\nNote: Replace HomeRegular with the specific Fluent Icon you want to use. The package will likely export each icon as a separate component.\r\n\r\n### Available Props\r\nThe generated React components will typically accept the following props (the exact props might vary depending on the icon and how the package is implemented):\r\n\r\n* size: (number | string) Sets the width and height of the icon. Can be a number (in pixels) or a string (e.g., \"1em\", \"20px\").\r\n* color: (string) Sets the primary fill color of the icon.\r\n* className: (string) Allows you to apply custom CSS classes to the icon.\r\n* style: (React.CSSProperties) Allows you to apply inline styles to the icon.\r\n* gradient: ({start: string, stop: string; angle?: number}) Allows you to specify a gradient color for the icon.\r\n\r\nRefer to the package's documentation or explore the component's props in your IDE for a complete list of available options.\r\n\r\n### Project Structure\r\nThe project is structured as follows:\r\n\r\n```\r\nfluenticons/\r\n├── src/\r\n│   └── components/\r\n│       └── ... (Generated icon components)\r\n├── vite.config.ts\r\n├── tsconfig.json\r\n├── package.json\r\n├── README.md\r\n└── ...\r\n```\r\n\r\n### Contributing\r\nContributions are welcome! If you find a bug or have a suggestion, please open an issue or submit a pull request.   \r\n\r\n### License\r\nThis project is licensed under the MIT License. See the LICENSE file for more information.   \r\n\r\n### Tech Stack\r\nReact\r\nTypeScript\r\nVite\r\nSWC\r\nMicrosoft Fluent Icons\r\nAcknowledgements\r\nThis project is inspired by and utilizes the excellent Microsoft Fluent Icons library.","readmeFilename":"README.md"}