{"id":15046954,"url":"https://github.com/levrik/mdi-react","last_synced_at":"2025-04-08T00:40:01.263Z","repository":{"id":9686060,"uuid":"62995751","full_name":"levrik/mdi-react","owner":"levrik","description":"Material Design Icons for React/Preact packaged as single components","archived":false,"fork":false,"pushed_at":"2024-09-26T21:47:44.000Z","size":290,"stargazers_count":146,"open_issues_count":12,"forks_count":23,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T22:22:35.782Z","etag":null,"topics":["icons","javascript","material","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/levrik.png","metadata":{"files":{"readme":"README-preact.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-10T11:37:11.000Z","updated_at":"2025-03-30T18:03:18.000Z","dependencies_parsed_at":"2024-09-29T06:15:13.780Z","dependency_job_id":null,"html_url":"https://github.com/levrik/mdi-react","commit_stats":{"total_commits":152,"total_committers":12,"mean_commits":"12.666666666666666","dds":0.3223684210526315,"last_synced_commit":"6e5ac2838aa2d52e5fd6198adb6388c384eb8e52"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levrik%2Fmdi-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levrik%2Fmdi-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levrik%2Fmdi-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levrik%2Fmdi-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/levrik","download_url":"https://codeload.github.com/levrik/mdi-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755560,"owners_count":20990620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icons","javascript","material","react","reactjs"],"created_at":"2024-09-24T20:53:47.992Z","updated_at":"2025-04-08T00:40:01.160Z","avatar_url":"https://github.com/levrik.png","language":"JavaScript","readme":"# mdi-preact [![npm package](https://img.shields.io/npm/v/mdi-preact.svg?style=flat-square)](https://npmjs.org/package/mdi-preact) [![Material Design Icons version](https://img.shields.io/badge/mdi-v7.4.47-blue.svg?style=flat-square)](https://materialdesignicons.com) [![build status](https://img.shields.io/travis/levrik/mdi-preact/master.svg?style=flat-square)](https://travis-ci.org/levrik/mdi-preact)\n[Material Design Icons](https://materialdesignicons.com) for Preact/React packaged as single components\n\n**New v9.4.0 released: See [CHANGELOG.md](./CHANGELOG.md)**\n\n## Installation\n\n```bash\nnpm install mdi-preact\n# or if you use Yarn\nyarn add mdi-preact\n```\n\nSupport for [React](https://reactjs.org/) is available via the `mdi-react` package.\n\n## Usage\n\nJust search for an icon on [materialdesignicons.com](https://materialdesignicons.com) and look for its name.  \nThe name translates to PascalCase followed by the suffix `Icon` in `mdi-preact`.  \nAlso it's possible to import with an alias. You can find them on the detail page of the respective icon.\n\nFor example the icons named `alert` and `alert-circle`:\n\n```javascript\nimport AlertIcon from 'mdi-preact/AlertIcon';\nimport AlertCircleIcon from 'mdi-preact/AlertCircleIcon';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      {/* The default color is the current text color (currentColor) */}\n      \u003cAlertIcon color=\"#fff\" /\u003e\n      {/* The default size is 24 */}\n      \u003cAlertCircleIcon class=\"some-class\" size={16} /\u003e\n      {/* This sets the icon size to the current font size */}\n      \u003cAlertIcon size=\"1em\" /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nTo change the color on hover you can just use your own class and plain CSS.\n\n```css\n.some-class:hover {\n  fill: red;\n}\n```\n\nYou can also add default styling via the `mdi-icon` class.\n\n```css\n.mdi-icon {\n  background-color: green;\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevrik%2Fmdi-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flevrik%2Fmdi-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevrik%2Fmdi-react/lists"}