{"id":18954371,"url":"https://github.com/templarian/materialdesign-react","last_synced_at":"2025-04-04T10:09:10.968Z","repository":{"id":38238471,"uuid":"143805230","full_name":"Templarian/MaterialDesign-React","owner":"Templarian","description":"Dist for Material Design Icons React Component for JS/TypeScript","archived":false,"fork":false,"pushed_at":"2023-03-02T16:16:30.000Z","size":1684,"stargazers_count":145,"open_issues_count":14,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T09:08:50.943Z","etag":null,"topics":["icons","material-design","react"],"latest_commit_sha":null,"homepage":"https://materialdesignicons.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Templarian.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-08-07T01:56:48.000Z","updated_at":"2025-03-22T17:50:44.000Z","dependencies_parsed_at":"2024-06-18T13:02:06.636Z","dependency_job_id":"4a211d40-1f4b-4ae5-b02c-98117212c79b","html_url":"https://github.com/Templarian/MaterialDesign-React","commit_stats":{"total_commits":101,"total_committers":11,"mean_commits":9.181818181818182,"dds":"0.13861386138613863","last_synced_commit":"ad6780c349b69c015e3e3f32a1fc31b2ed334517"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Templarian","download_url":"https://codeload.github.com/Templarian/MaterialDesign-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157283,"owners_count":20893220,"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","material-design","react"],"created_at":"2024-11-08T13:44:48.252Z","updated_at":"2025-04-04T10:09:10.936Z","avatar_url":"https://github.com/Templarian.png","language":"TypeScript","readme":"# React - Material Design Icons\r\n\r\n[Material Design Icons](https://materialdesignicons.com/) can be used in React with a custom component or with the one provided in this module.\r\n\r\n[View the Demo](https://templarian.github.io/@mdi/react/)\r\n\r\n```\r\nnpm install @mdi/react\r\n```\r\n\r\n## Usage\r\n\r\nThe example below uses the `@mdi/js` package which contains all the MDI icon's path data.\r\n\r\n```javascript\r\nimport React, { Component } from 'react';\r\nimport Icon from '@mdi/react';\r\nimport { mdiAccount } from '@mdi/js';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      \u003cIcon path={mdiAccount}\r\n        size={1}\r\n        horizontal\r\n        vertical\r\n        rotate={90}\r\n        color=\"red\"/\u003e\r\n    );\r\n  }\r\n} \r\n```\r\n\r\n## Stack Usage\r\n\r\nTo layer `\u003cIcons/\u003e` nest them inside of the `\u003cStack/\u003e` component.\r\n\r\n```javascript\r\nimport React, { Component } from 'react';\r\nimport Icon, { Stack } from '@mdi/react';\r\nimport { mdiAccount, mdiBlockHelper } from '@mdi/js';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      \u003cStack color=\"#444\"\u003e\r\n        \u003cIcon path={mdiAccount}/\u003e\r\n        \u003cIcon path={mdiBlockHelper}\r\n          color=\"red\"/\u003e\r\n      \u003c/Stack\u003e\r\n    );\r\n  }\r\n} \r\n```\r\n\r\n## Props\r\n\r\n### Icon `\u003cIcon/\u003e`\r\n\r\n| Prop        | PropTypes      | Default  | Details |\r\n|-------------|----------------|----------|---------|\r\n| title       | string, null   | `null`   | A11y `\u003ctitle\u003e{title}\u003c/title\u003e` |\r\n| description | string, null   | `null`   | A11y `\u003cdesc\u003e{desc}\u003c/desc\u003e` |\r\n| path        | string         | required | SVG path data. Usually from [@mdi/js](https://templarian.github.io/@mdi/js) |\r\n| size        | number, string | `null`   | `{size * 1.5}rem`, `1em`, `48px` |\r\n| horizontal  | bool           | `false ` | Flip Horizontal |\r\n| vertical    | bool           | `false`  | Flip Vertical |\r\n| rotate      | number         | `0 `     | degrees `0` to `360` |\r\n| color       | string         | `null`   | `rgb()` / `rgba()` / `#000` |\r\n| spin        | bool, number   | `false`  | `true` = `2s`, `-2` counterclockwise, `{spin}s` |\r\n\r\n\u003e Note: Additional props will be applied to the `\u003csvg\u003e` element.\r\n\r\n### Stack `\u003cStack/\u003e`\r\n\r\nAll props below will override the nested `\u003cIcon/\u003e`'s default prop values.\r\n\r\n| Prop        | PropTypes            | Default  | Details |\r\n|-------------|----------------------|----------|---------|\r\n| title       | string, null         | `null`   | A11y `\u003ctitle\u003e{title}\u003c/title\u003e` |\r\n| description | string, null         | `null`   | A11y `\u003cdesc\u003e{desc}\u003c/desc\u003e` |\r\n| size        | number, string, null | `null`   | `{size * 1.5}rem` |\r\n| horizontal  | bool, null           | `null`   | Flip Horizontal |\r\n| vertical    | bool, null           | `null`   | Flip Vertical |\r\n| rotate      | number, null         | `null`   | degrees `0` to `360` |\r\n| color       | string, null         | `null`   | `rgb()` / `rgba()` / `#000` |\r\n| spin        | bool, number, null   | `null`   | `true` = `2s`, `-2` counterclockwise, `{spin}s` |\r\n\r\n\u003e Note: Additional props on `\u003cStack\u003e` will apply to the `\u003csvg\u003e` element. Only in a `\u003cStack\u003e` will addional props to the `\u003cIcon\u003e` component apply to the nested `\u003cpath\u003e` elements.\r\n\r\n\r\n## Styling\r\n\r\nApplying a `className` attribute is usually the easiest solution. The example below demonstrates using SCSS to style the icons.\r\n\r\nIn most cases it may be a good idea to set a base size. Assuming a `16px` base `font-size` in most themes applying `1.5rem` will make the icon a `24px`.\r\n\r\n```sass\r\nsvg {\r\n  width: 1.5rem;\r\n}\r\n```\r\n\r\nFor more specific styling apply classes. To make selection of layers easier use the `nth-child` selector.\r\n\r\n```sass\r\n// For \u003cIcon className=\"custom-class\" /\u003e\r\nsvg.custom-class {\r\n  path {\r\n    fill: blue;\r\n  }\r\n}\r\n// For \u003cStack className=\"custom-class\"\u003e\r\nsvg.custom-class {\r\n  // First layer (behind)\r\n  path:nth-child(1) {\r\n    fill: blue;\r\n  }\r\n  // Second layer (infront)\r\n  path:nth-child(2) {\r\n    fill: red;\r\n  }\r\n}\r\n```\r\n\r\n## Accessibility\r\n\r\nMaking icons accessible can be done through the `title` prop. If for some rare reason more information is required a `description` field can also be used.\r\n\r\nBy leaving off the `title` prop an icon is assumed to be presentation only. These will be ignored by screen readers. This is ideal for icon buttons or areas where text next to the icon suffices.\r\n\r\n```js\r\n\u003cp\u003e\u003cIcon path={mdiAccount} /\u003e User Profile\u003c/p\u003e\r\n\u003cp\u003e\u003cIcon path={mdiAccount} title=\"User Profile\" /\u003e\u003c/p\u003e\r\n\u003cbutton aria-label=\"User Profile\"\u003e\u003cIcon path={mdiAccount} /\u003e\u003c/button\u003e\r\n```\r\n\r\n## Development\r\n\r\nTo develop clone the repo and run `npm install`.\r\n\r\n- `src/Icon.tsx` - Icon Component\r\n  - `tests/Icon.spec.tsx` - Unit tests\r\n- `src/Stack.tsx` - Stack Component\r\n  - `tests/Stack.spec.tsx` - Unit tests\r\n\r\nCommands:\r\n\r\n- `npm run start` - Watch for file changes\r\n- `npm run build` - Build Icon.js\r\n- `npm run test` - Run unit tests\r\n\r\n\u003e Note: This project is setup to use the [Mocha Sidebar](https://marketplace.visualstudio.com/items?itemName=maty.vscode-mocha-sidebar) extension which makes it easier to view the tests.\r\n\r\n## Related Packages\r\n\r\n[NPM @MDI Organization](https://npmjs.com/org/mdi)\r\n\r\n- JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS)\r\n- Vue: [MaterialDesign-Vue](https://github.com/Templarian/MaterialDesign-Vue)\r\n- Webfont: [MaterialDesign-Webfont](https://github.com/Templarian/MaterialDesign-Webfont)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemplarian%2Fmaterialdesign-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftemplarian%2Fmaterialdesign-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemplarian%2Fmaterialdesign-react/lists"}