├── .babelrc ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── Icon.js ├── Icon.js.map ├── LICENSE ├── README.md ├── dist ├── Icon.d.ts ├── IconProps.d.ts ├── Stack.d.ts └── StackProps.d.ts ├── package-lock.json ├── package.json ├── src ├── Icon.tsx ├── IconProps.ts ├── Stack.tsx └── StackProps.ts ├── tests ├── Icon.spec.tsx └── Stack.spec.tsx ├── tsconfig.commonjs.json ├── tsconfig.json ├── tslint.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-react-jsx" 6 | ] 7 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .nyc_output/ 3 | coverage/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "node", 3 | "request": "launch", 4 | "name": "Mocha Current File", 5 | "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", 6 | "args": [ 7 | "--no-timeouts", 8 | "--colors", 9 | "${file}", 10 | "--require", 11 | "ts-node/register" 12 | ], 13 | "console": "integratedTerminal", 14 | "sourceMaps": true, 15 | "internalConsoleOptions": "neverOpen" 16 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "mocha.requires": [ 4 | "ts-node/register", 5 | "jsdom-global/register" 6 | ], 7 | "mocha.files.glob": "tests/**/*.spec.tsx", 8 | "mocha.env": { 9 | "TS_NODE_COMPILER_OPTIONS": "{\"module\":\"commonjs\",\"jsx\":\"react\"}", 10 | "TS_NODE_SKIP_PROJECT": "YES" 11 | } 12 | } -------------------------------------------------------------------------------- /Icon.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t);var n=r(1),o=r(0),l=function(){return(l=Object.assign||function(e){for(var t,r=1,n=arguments.length;r0&&(S.transform=q.join(" "),S.transformOrigin="center",_&&(C=n.createElement("g",{style:S},M,n.createElement("rect",{width:"24",height:"24",fill:"transparent"}))));var I,N=C,R=!0===E||"number"!=typeof E?2:E,B=!_&&(h||O);if(R<0&&(B=!B),E&&(N=n.createElement("g",{style:{animation:"spin"+(B?"-inverse":"")+" linear "+Math.abs(R)+"s infinite",transformOrigin:"center"}},C,!(h||O||0!==j)&&n.createElement("rect",{width:"24",height:"24",fill:"transparent"}))),_)return N;var X,Y="icon_labelledby_"+l,A="icon_describedby_"+l;if(a)I=c?Y+" "+A:Y;else if(X="presentation",c)throw new Error("title attribute required when description is set");return n.createElement("svg",u({ref:t,viewBox:"0 0 24 24",style:S,role:X,"aria-labelledby":I},k),a&&n.createElement("title",{id:Y},a),c&&n.createElement("desc",{id:A},c),!_&&E&&(B?n.createElement("style",null,"@keyframes spin-inverse { from { transform: rotate(0deg) } to { transform: rotate(-360deg) } }"):n.createElement("style",null,"@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }")),N)}));d.displayName="Icon",d.propTypes={path:o.string.isRequired,size:o.oneOfType([o.number,o.string]),color:o.string,horizontal:o.bool,vertical:o.bool,rotate:o.number,spin:o.oneOfType([o.bool,o.number]),style:o.object,inStack:o.bool,className:o.string},d.defaultProps={size:null,color:"currentColor",horizontal:!1,vertical:!1,rotate:0,spin:!1};t.default=d}]); 2 | //# sourceMappingURL=Icon.js.map -------------------------------------------------------------------------------- /Icon.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"prop-types\"","webpack:///external \"react\"","webpack:///./src/Stack.tsx","webpack:///./src/Icon.tsx"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","Stack","ref","title","description","size","color","horizontal","vertical","rotate","spin","style","children","ariaLabelledby","anySpin","childrenWithProps","map","child","childElement","props","scaledSize","inStack","width","role","labelledById","describedById","Error","viewBox","rest","id","displayName","propTypes","isRequired","className","defaultProps","idCounter","Icon","path","pathStyle","transform","push","height","fill","pathElement","transformElement","length","join","transformOrigin","spinElement","spinSec","inverse","animation","Math","abs"],"mappings":"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","file":"Icon.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n","module.exports = require(\"prop-types\");","module.exports = require(\"react\");","import * as React from \"react\";\r\nimport { FunctionComponent, ValidationMap, ReactElement, CSSProperties } from \"react\";\r\nimport * as PropTypes from \"prop-types\";\r\nimport { StackProps } from './StackProps';\r\nimport { IconProps } from './IconProps';\r\n\r\nlet id = 0;\r\n\r\nconst Stack: FunctionComponent = React.forwardRef(({\r\n title = null,\r\n description = null,\r\n size = null,\r\n color = 'currentColor',\r\n horizontal = null,\r\n vertical = null,\r\n rotate = null,\r\n spin = null,\r\n style = {} as CSSProperties,\r\n children,\r\n ...rest\r\n}, ref) => {\r\n id++;\r\n let anySpin = spin === null ? false : spin;\r\n const childrenWithProps = React.Children.map(children, (child) => {\r\n const childElement = child as ReactElement;\r\n if (anySpin !== true) {\r\n anySpin = (spin === null ? childElement.props.spin : spin) === true;\r\n }\r\n let scaledSize = childElement.props.size;\r\n if (typeof size === 'number' && typeof childElement.props.size === 'number') {\r\n scaledSize = childElement.props.size / size;\r\n }\r\n const props: Partial = {\r\n size: scaledSize,\r\n color: color === null ? childElement.props.color : color,\r\n horizontal: horizontal === null ? childElement.props.horizontal : horizontal,\r\n vertical: vertical === null ? childElement.props.vertical : vertical,\r\n rotate: rotate === null ? childElement.props.rotate : rotate,\r\n spin: spin === null ? childElement.props.spin : spin,\r\n inStack: true\r\n };\r\n return React.cloneElement(childElement, props);\r\n });\r\n if (size !== null) {\r\n style.width = typeof size === \"string\"\r\n ? size\r\n : `${size * 1.5}rem`;\r\n }\r\n let ariaLabelledby;\r\n let labelledById = `stack_labelledby_${id}`;\r\n let describedById = `stack_describedby_${id}`;\r\n let role;\r\n if (title) {\r\n ariaLabelledby = description\r\n ? `${labelledById} ${describedById}`\r\n : labelledById;\r\n } else {\r\n role = 'presentation';\r\n if (description) {\r\n throw new Error(\"title attribute required when description is set\");\r\n }\r\n }\r\n return (\r\n \r\n {title && {title}}\r\n {description && {description}}\r\n {anySpin && (\r\n \r\n )}\r\n {childrenWithProps}\r\n \r\n );\r\n});\r\n\r\nStack.displayName = 'Stack';\r\n\r\nStack.propTypes = {\r\n size: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string\r\n ]),\r\n color: PropTypes.string,\r\n horizontal: PropTypes.bool,\r\n vertical: PropTypes.bool,\r\n rotate: PropTypes.number,\r\n spin: PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.number\r\n ]),\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node\r\n ]).isRequired,\r\n className: PropTypes.string,\r\n style: PropTypes.object\r\n} as ValidationMap;\r\n\r\nStack.defaultProps = {\r\n size: null,\r\n color: null,\r\n horizontal: null,\r\n vertical: null,\r\n rotate: null,\r\n spin: null\r\n};\r\n\r\nexport default Stack;\r\n","import * as React from \"react\";\r\nimport { FunctionComponent, ValidationMap, CSSProperties } from \"react\";\r\nimport * as PropTypes from \"prop-types\";\r\nimport { IconProps } from './IconProps';\r\n\r\nexport { default as Stack } from './Stack';\r\n\r\nlet idCounter = 0;\r\n\r\nexport const Icon: FunctionComponent = React.forwardRef(({\r\n path,\r\n id = ++idCounter,\r\n title = null,\r\n description = null,\r\n size = null,\r\n color = 'currentColor',\r\n horizontal = false,\r\n vertical = false,\r\n rotate = 0,\r\n spin = false,\r\n style = {} as CSSProperties,\r\n inStack = false,\r\n ...rest\r\n}, ref) => {\r\n const pathStyle: any = {};\r\n const transform = [];\r\n if (size !== null) {\r\n if (inStack) {\r\n transform.push(`scale(${size})`);\r\n } else {\r\n style.width = typeof size === \"string\"\r\n ? size\r\n : `${size * 1.5}rem`;\r\n style.height = style.width;\r\n }\r\n }\r\n if (horizontal) {\r\n transform.push(\"scaleX(-1)\");\r\n }\r\n if (vertical) {\r\n transform.push(\"scaleY(-1)\");\r\n }\r\n if (rotate !== 0) {\r\n transform.push(`rotate(${rotate}deg)`);\r\n }\r\n if (color !== null) {\r\n pathStyle.fill = color;\r\n }\r\n let pathElement = (\r\n \r\n );\r\n let transformElement = pathElement;\r\n if (transform.length > 0) {\r\n style.transform = transform.join(' ');\r\n style.transformOrigin = 'center';\r\n if (inStack) {\r\n transformElement = (\r\n \r\n {pathElement}\r\n \r\n \r\n )\r\n }\r\n }\r\n let spinElement = transformElement;\r\n const spinSec = spin === true || typeof spin !== 'number' ? 2 : spin;\r\n let inverse = !inStack && (horizontal || vertical);\r\n if (spinSec < 0) { inverse = !inverse }\r\n if (spin) {\r\n spinElement = (\r\n \r\n {transformElement}\r\n {!(horizontal || vertical || rotate !== 0) && (\r\n \r\n )}\r\n \r\n )\r\n }\r\n if (inStack) {\r\n return spinElement;\r\n }\r\n let ariaLabelledby;\r\n let labelledById = `icon_labelledby_${id}`;\r\n let describedById = `icon_describedby_${id}`;\r\n let role;\r\n if (title) {\r\n ariaLabelledby = description\r\n ? `${labelledById} ${describedById}`\r\n : labelledById;\r\n } else {\r\n role = 'presentation';\r\n if (description) {\r\n throw new Error(\"title attribute required when description is set\");\r\n }\r\n }\r\n return (\r\n \r\n {title && {title}}\r\n {description && {description}}\r\n {!inStack && spin && (\r\n inverse\r\n ? \r\n : \r\n )}\r\n {spinElement}\r\n \r\n );\r\n});\r\n\r\nIcon.displayName = 'Icon';\r\n\r\nIcon.propTypes = {\r\n path: PropTypes.string.isRequired,\r\n size: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string\r\n ]),\r\n color: PropTypes.string,\r\n horizontal: PropTypes.bool,\r\n vertical: PropTypes.bool,\r\n rotate: PropTypes.number,\r\n spin: PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.number\r\n ]),\r\n style: PropTypes.object,\r\n inStack: PropTypes.bool,\r\n className: PropTypes.string\r\n} as ValidationMap;\r\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28249\r\n\r\nIcon.defaultProps = {\r\n size: null,\r\n color: 'currentColor',\r\n horizontal: false,\r\n vertical: false,\r\n rotate: 0,\r\n spin: false\r\n};\r\n\r\nexport default Icon;\r\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Austin Andrews 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React - Material Design Icons 2 | 3 | [Material Design Icons](https://materialdesignicons.com/) can be used in React with a custom component or with the one provided in this module. 4 | 5 | [View the Demo](https://templarian.github.io/@mdi/react/) 6 | 7 | ``` 8 | npm install @mdi/react 9 | ``` 10 | 11 | ## Usage 12 | 13 | The example below uses the `@mdi/js` package which contains all the MDI icon's path data. 14 | 15 | ```javascript 16 | import React, { Component } from 'react'; 17 | import Icon from '@mdi/react'; 18 | import { mdiAccount } from '@mdi/js'; 19 | 20 | class App extends Component { 21 | render() { 22 | return ( 23 | 29 | ); 30 | } 31 | } 32 | ``` 33 | 34 | ## Stack Usage 35 | 36 | To layer `` nest them inside of the `` component. 37 | 38 | ```javascript 39 | import React, { Component } from 'react'; 40 | import Icon, { Stack } from '@mdi/react'; 41 | import { mdiAccount, mdiBlockHelper } from '@mdi/js'; 42 | 43 | class App extends Component { 44 | render() { 45 | return ( 46 | 47 | 48 | 50 | 51 | ); 52 | } 53 | } 54 | ``` 55 | 56 | ## Props 57 | 58 | ### Icon `` 59 | 60 | | Prop | PropTypes | Default | Details | 61 | |-------------|----------------|----------|---------| 62 | | title | string, null | `null` | A11y `{title}` | 63 | | description | string, null | `null` | A11y `{desc}` | 64 | | path | string | required | SVG path data. Usually from [@mdi/js](https://templarian.github.io/@mdi/js) | 65 | | size | number, string | `null` | `{size * 1.5}rem`, `1em`, `48px` | 66 | | horizontal | bool | `false ` | Flip Horizontal | 67 | | vertical | bool | `false` | Flip Vertical | 68 | | rotate | number | `0 ` | degrees `0` to `360` | 69 | | color | string | `null` | `rgb()` / `rgba()` / `#000` | 70 | | spin | bool, number | `false` | `true` = `2s`, `-2` counterclockwise, `{spin}s` | 71 | 72 | > Note: Additional props will be applied to the `` element. 73 | 74 | ### Stack `` 75 | 76 | All props below will override the nested ``'s default prop values. 77 | 78 | | Prop | PropTypes | Default | Details | 79 | |-------------|----------------------|----------|---------| 80 | | title | string, null | `null` | A11y `{title}` | 81 | | description | string, null | `null` | A11y `{desc}` | 82 | | size | number, string, null | `null` | `{size * 1.5}rem` | 83 | | horizontal | bool, null | `null` | Flip Horizontal | 84 | | vertical | bool, null | `null` | Flip Vertical | 85 | | rotate | number, null | `null` | degrees `0` to `360` | 86 | | color | string, null | `null` | `rgb()` / `rgba()` / `#000` | 87 | | spin | bool, number, null | `null` | `true` = `2s`, `-2` counterclockwise, `{spin}s` | 88 | 89 | > Note: Additional props on `` will apply to the `` element. Only in a `` will addional props to the `` component apply to the nested `` elements. 90 | 91 | 92 | ## Styling 93 | 94 | Applying a `className` attribute is usually the easiest solution. The example below demonstrates using SCSS to style the icons. 95 | 96 | In 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`. 97 | 98 | ```sass 99 | svg { 100 | width: 1.5rem; 101 | } 102 | ``` 103 | 104 | For more specific styling apply classes. To make selection of layers easier use the `nth-child` selector. 105 | 106 | ```sass 107 | // For 108 | svg.custom-class { 109 | path { 110 | fill: blue; 111 | } 112 | } 113 | // For 114 | svg.custom-class { 115 | // First layer (behind) 116 | path:nth-child(1) { 117 | fill: blue; 118 | } 119 | // Second layer (infront) 120 | path:nth-child(2) { 121 | fill: red; 122 | } 123 | } 124 | ``` 125 | 126 | ## Accessibility 127 | 128 | Making 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. 129 | 130 | By 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. 131 | 132 | ```js 133 |

User Profile

134 |

135 | 136 | ``` 137 | 138 | ## Development 139 | 140 | To develop clone the repo and run `npm install`. 141 | 142 | - `src/Icon.tsx` - Icon Component 143 | - `tests/Icon.spec.tsx` - Unit tests 144 | - `src/Stack.tsx` - Stack Component 145 | - `tests/Stack.spec.tsx` - Unit tests 146 | 147 | Commands: 148 | 149 | - `npm run start` - Watch for file changes 150 | - `npm run build` - Build Icon.js 151 | - `npm run test` - Run unit tests 152 | 153 | > 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. 154 | 155 | ## Related Packages 156 | 157 | [NPM @MDI Organization](https://npmjs.com/org/mdi) 158 | 159 | - JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS) 160 | - Vue: [MaterialDesign-Vue](https://github.com/Templarian/MaterialDesign-Vue) 161 | - Webfont: [MaterialDesign-Webfont](https://github.com/Templarian/MaterialDesign-Webfont) 162 | -------------------------------------------------------------------------------- /dist/Icon.d.ts: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from "react"; 2 | import { IconProps } from './IconProps'; 3 | export { default as Stack } from './Stack'; 4 | export declare const Icon: FunctionComponent; 5 | export default Icon; 6 | -------------------------------------------------------------------------------- /dist/IconProps.d.ts: -------------------------------------------------------------------------------- 1 | import { CSSProperties, RefObject, AriaAttributes } from 'react'; 2 | export interface HTMLProps extends AriaAttributes { 3 | className?: string; 4 | } 5 | export interface IconProps extends HTMLProps { 6 | id?: string; 7 | path: string; 8 | ref?: RefObject; 9 | title?: string | null; 10 | description?: string | null; 11 | size?: number | string | null; 12 | color?: string | null; 13 | horizontal?: boolean; 14 | vertical?: boolean; 15 | rotate?: number; 16 | spin?: boolean | number; 17 | style?: CSSProperties; 18 | inStack?: boolean; 19 | } 20 | -------------------------------------------------------------------------------- /dist/Stack.d.ts: -------------------------------------------------------------------------------- 1 | import { FunctionComponent } from "react"; 2 | import { StackProps } from './StackProps'; 3 | declare const Stack: FunctionComponent; 4 | export default Stack; 5 | -------------------------------------------------------------------------------- /dist/StackProps.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactElement, CSSProperties, RefObject } from "react"; 2 | import { IconProps, HTMLProps } from "./IconProps"; 3 | export interface StackPropsBase { 4 | ref?: RefObject; 5 | title?: string | null; 6 | description?: string | null; 7 | size?: number | string | null; 8 | color?: string | null; 9 | horizontal?: boolean | null; 10 | vertical?: boolean | null; 11 | rotate?: number | null; 12 | spin?: boolean | number | null; 13 | style?: CSSProperties; 14 | } 15 | export interface StackProps extends StackPropsBase, HTMLProps { 16 | children: ReactElement[] | ReactElement; 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mdi/react", 3 | "version": "1.6.1", 4 | "description": "React Dist for Material Design Icons", 5 | "main": "Icon.js", 6 | "types": "dist/Icon.d.ts", 7 | "files": [ 8 | "dist/Icon.d.ts", 9 | "dist/IconProps.d.ts", 10 | "dist/Stack.d.ts", 11 | "dist/StackProps.d.ts", 12 | "Icon.js.map", 13 | "README.md" 14 | ], 15 | "scripts": { 16 | "test": "cross-env TS_NODE_PROJECT='./tsconfig.commonjs.json' mocha -r ts-node/register -r jsdom-global/register tests/**/*.spec.tsx", 17 | "testWithCoverage": "nyc -r lcov -e .ts -x \"*.test.tsx?\" mocha -r ts-node/register tests/**/*.test.tsx? && nyc report", 18 | "start": "webpack --watch", 19 | "build": "webpack", 20 | "build2": "tsc -outFile dist/Icon2.js src/Icon.tsx" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/Templarian/MaterialDesign-React.git" 25 | }, 26 | "keywords": [ 27 | "Material", 28 | "Design", 29 | "Icons", 30 | "React" 31 | ], 32 | "author": "Austin Andrews", 33 | "contributors": [ 34 | "Anton Zdanov (https://azdanov.js.org/)" 35 | ], 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/Templarian/MaterialDesign-React/issues" 39 | }, 40 | "homepage": "https://github.com/Templarian/MaterialDesign-React#readme", 41 | "devDependencies": { 42 | "@types/chai": "^4.2.9", 43 | "@types/enzyme": "^3.10.5", 44 | "@types/enzyme-adapter-react-16": "^1.0.6", 45 | "@types/jsdom": "^11.12.0", 46 | "@types/mocha": "^5.2.7", 47 | "@types/react": "^16.9.19", 48 | "@types/react-dom": "^16.9.5", 49 | "chai": "^4.2.0", 50 | "cross-env": "^5.2.1", 51 | "csstype": "^2.6.9", 52 | "enzyme": "^3.11.0", 53 | "enzyme-adapter-react-16": "^1.15.2", 54 | "jsdom": "^12.2.0", 55 | "jsdom-global": "^3.0.2", 56 | "mocha": "^5.2.0", 57 | "nyc": "^12.0.2", 58 | "react": "^16.12.0", 59 | "react-dom": "^16.12.0", 60 | "ts-loader": "^4.5.0", 61 | "ts-node": "^7.0.1", 62 | "tslint": "^5.20.1", 63 | "tslint-config-airbnb": "^5.11.2", 64 | "typescript": "^3.7.5", 65 | "webpack": "^4.41.6", 66 | "webpack-command": "^0.4.2" 67 | }, 68 | "dependencies": { 69 | "prop-types": "^15.7.2" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/Icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { FunctionComponent, ValidationMap, CSSProperties } from "react"; 3 | import * as PropTypes from "prop-types"; 4 | import { IconProps } from './IconProps'; 5 | 6 | export { default as Stack } from './Stack'; 7 | 8 | let idCounter = 0; 9 | 10 | export const Icon: FunctionComponent = React.forwardRef(({ 11 | path, 12 | id = ++idCounter, 13 | title = null, 14 | description = null, 15 | size = null, 16 | color = 'currentColor', 17 | horizontal = false, 18 | vertical = false, 19 | rotate = 0, 20 | spin = false, 21 | style = {} as CSSProperties, 22 | inStack = false, 23 | ...rest 24 | }, ref) => { 25 | const pathStyle: any = {}; 26 | const transform = []; 27 | if (size !== null) { 28 | if (inStack) { 29 | transform.push(`scale(${size})`); 30 | } else { 31 | style.width = typeof size === "string" 32 | ? size 33 | : `${size * 1.5}rem`; 34 | style.height = style.width; 35 | } 36 | } 37 | if (horizontal) { 38 | transform.push("scaleX(-1)"); 39 | } 40 | if (vertical) { 41 | transform.push("scaleY(-1)"); 42 | } 43 | if (rotate !== 0) { 44 | transform.push(`rotate(${rotate}deg)`); 45 | } 46 | if (color !== null) { 47 | pathStyle.fill = color; 48 | } 49 | let pathElement = ( 50 | 54 | ); 55 | let transformElement = pathElement; 56 | if (transform.length > 0) { 57 | style.transform = transform.join(' '); 58 | style.transformOrigin = 'center'; 59 | if (inStack) { 60 | transformElement = ( 61 | 62 | {pathElement} 63 | 64 | 65 | ) 66 | } 67 | } 68 | let spinElement = transformElement; 69 | const spinSec = spin === true || typeof spin !== 'number' ? 2 : spin; 70 | let inverse = !inStack && (horizontal || vertical); 71 | if (spinSec < 0) { inverse = !inverse } 72 | if (spin) { 73 | spinElement = ( 74 | 78 | {transformElement} 79 | {!(horizontal || vertical || rotate !== 0) && ( 80 | 81 | )} 82 | 83 | ) 84 | } 85 | if (inStack) { 86 | return spinElement; 87 | } 88 | let ariaLabelledby; 89 | let labelledById = `icon_labelledby_${id}`; 90 | let describedById = `icon_describedby_${id}`; 91 | let role; 92 | if (title) { 93 | ariaLabelledby = description 94 | ? `${labelledById} ${describedById}` 95 | : labelledById; 96 | } else { 97 | role = 'presentation'; 98 | if (description) { 99 | throw new Error("title attribute required when description is set"); 100 | } 101 | } 102 | return ( 103 | 110 | {title && {title}} 111 | {description && {description}} 112 | {!inStack && spin && ( 113 | inverse 114 | ? 115 | : 116 | )} 117 | {spinElement} 118 | 119 | ); 120 | }); 121 | 122 | Icon.displayName = 'Icon'; 123 | 124 | Icon.propTypes = { 125 | path: PropTypes.string.isRequired, 126 | size: PropTypes.oneOfType([ 127 | PropTypes.number, 128 | PropTypes.string 129 | ]), 130 | color: PropTypes.string, 131 | horizontal: PropTypes.bool, 132 | vertical: PropTypes.bool, 133 | rotate: PropTypes.number, 134 | spin: PropTypes.oneOfType([ 135 | PropTypes.bool, 136 | PropTypes.number 137 | ]), 138 | style: PropTypes.object, 139 | inStack: PropTypes.bool, 140 | className: PropTypes.string 141 | } as ValidationMap; 142 | // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28249 143 | 144 | Icon.defaultProps = { 145 | size: null, 146 | color: 'currentColor', 147 | horizontal: false, 148 | vertical: false, 149 | rotate: 0, 150 | spin: false 151 | }; 152 | 153 | export default Icon; 154 | -------------------------------------------------------------------------------- /src/IconProps.ts: -------------------------------------------------------------------------------- 1 | import { CSSProperties, RefObject, AriaAttributes } from 'react' 2 | 3 | export interface HTMLProps extends AriaAttributes { 4 | className?: string; 5 | } 6 | 7 | export interface IconProps extends HTMLProps { 8 | id?: string; 9 | path: string; 10 | ref?: RefObject; 11 | title?: string | null; 12 | description?: string | null; 13 | size?: number | string | null; 14 | color?: string | null; 15 | horizontal?: boolean; 16 | vertical?: boolean; 17 | rotate?: number; 18 | spin?: boolean | number; 19 | style?: CSSProperties; 20 | inStack?: boolean; 21 | } 22 | -------------------------------------------------------------------------------- /src/Stack.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { FunctionComponent, ValidationMap, ReactElement, CSSProperties } from "react"; 3 | import * as PropTypes from "prop-types"; 4 | import { StackProps } from './StackProps'; 5 | import { IconProps } from './IconProps'; 6 | 7 | let id = 0; 8 | 9 | const Stack: FunctionComponent = React.forwardRef(({ 10 | title = null, 11 | description = null, 12 | size = null, 13 | color = 'currentColor', 14 | horizontal = null, 15 | vertical = null, 16 | rotate = null, 17 | spin = null, 18 | style = {} as CSSProperties, 19 | children, 20 | ...rest 21 | }, ref) => { 22 | id++; 23 | let anySpin = spin === null ? false : spin; 24 | const childrenWithProps = React.Children.map(children, (child) => { 25 | const childElement = child as ReactElement; 26 | if (anySpin !== true) { 27 | anySpin = (spin === null ? childElement.props.spin : spin) === true; 28 | } 29 | let scaledSize = childElement.props.size; 30 | if (typeof size === 'number' && typeof childElement.props.size === 'number') { 31 | scaledSize = childElement.props.size / size; 32 | } 33 | const props: Partial = { 34 | size: scaledSize, 35 | color: color === null ? childElement.props.color : color, 36 | horizontal: horizontal === null ? childElement.props.horizontal : horizontal, 37 | vertical: vertical === null ? childElement.props.vertical : vertical, 38 | rotate: rotate === null ? childElement.props.rotate : rotate, 39 | spin: spin === null ? childElement.props.spin : spin, 40 | inStack: true 41 | }; 42 | return React.cloneElement(childElement, props); 43 | }); 44 | if (size !== null) { 45 | style.width = typeof size === "string" 46 | ? size 47 | : `${size * 1.5}rem`; 48 | } 49 | let ariaLabelledby; 50 | let labelledById = `stack_labelledby_${id}`; 51 | let describedById = `stack_describedby_${id}`; 52 | let role; 53 | if (title) { 54 | ariaLabelledby = description 55 | ? `${labelledById} ${describedById}` 56 | : labelledById; 57 | } else { 58 | role = 'presentation'; 59 | if (description) { 60 | throw new Error("title attribute required when description is set"); 61 | } 62 | } 63 | return ( 64 | 71 | {title && {title}} 72 | {description && {description}} 73 | {anySpin && ( 74 | 78 | )} 79 | {childrenWithProps} 80 | 81 | ); 82 | }); 83 | 84 | Stack.displayName = 'Stack'; 85 | 86 | Stack.propTypes = { 87 | size: PropTypes.oneOfType([ 88 | PropTypes.number, 89 | PropTypes.string 90 | ]), 91 | color: PropTypes.string, 92 | horizontal: PropTypes.bool, 93 | vertical: PropTypes.bool, 94 | rotate: PropTypes.number, 95 | spin: PropTypes.oneOfType([ 96 | PropTypes.bool, 97 | PropTypes.number 98 | ]), 99 | children: PropTypes.oneOfType([ 100 | PropTypes.arrayOf(PropTypes.node), 101 | PropTypes.node 102 | ]).isRequired, 103 | className: PropTypes.string, 104 | style: PropTypes.object 105 | } as ValidationMap; 106 | 107 | Stack.defaultProps = { 108 | size: null, 109 | color: null, 110 | horizontal: null, 111 | vertical: null, 112 | rotate: null, 113 | spin: null 114 | }; 115 | 116 | export default Stack; 117 | -------------------------------------------------------------------------------- /src/StackProps.ts: -------------------------------------------------------------------------------- 1 | import { ReactElement, CSSProperties, RefObject } from "react"; 2 | import { IconProps, HTMLProps } from "./IconProps"; 3 | 4 | export interface StackPropsBase { 5 | ref?: RefObject; 6 | title?: string | null; 7 | description?: string | null; 8 | size?: number | string | null; 9 | color?: string | null; 10 | horizontal?: boolean | null; 11 | vertical?: boolean | null; 12 | rotate?: number | null; 13 | spin?: boolean | number | null; 14 | style?: CSSProperties; 15 | } 16 | 17 | export interface StackProps extends StackPropsBase, HTMLProps { 18 | children: ReactElement[] | ReactElement; 19 | } -------------------------------------------------------------------------------- /tests/Icon.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { expect } from "chai"; 3 | import { shallow, mount } from "enzyme"; 4 | import { configure } from 'enzyme'; 5 | import * as Adapter from 'enzyme-adapter-react-16'; 6 | import Icon from "../src/Icon"; 7 | 8 | configure({ adapter: new Adapter() }); 9 | 10 | const path = 'M0,0H24V24H0'; 11 | 12 | describe(" Renders", () => { 13 | 14 | it("renders the the svg > path", () => { 15 | const svgElement = shallow(); 16 | expect(svgElement.type()).to.equal('svg'); 17 | expect(svgElement.childAt(0).type()).to.equal('path'); 18 | }); 19 | 20 | }); 21 | 22 | describe("", () => { 23 | 24 | it("verify svg[viewBox]", () => { 25 | const svgElement = shallow(); 26 | const { viewBox } = svgElement.props(); 27 | expect(viewBox).to.equal('0 0 24 24'); 28 | }); 29 | 30 | it("verify svg.style (width='', transform='', animation='', transformOrigin='')", () => { 31 | const svgElement = shallow(); 32 | const { 33 | width, 34 | transform, 35 | animation, 36 | transformOrigin, 37 | } = svgElement.props().style; 38 | expect(width).to.equal(undefined); 39 | expect(transform).to.equal(undefined); 40 | expect(animation).to.equal(undefined); 41 | expect(transformOrigin).to.equal(undefined); 42 | }); 43 | it("verify svg > path[d]", () => { 44 | const svgElement = shallow(); 45 | const { d } = svgElement.childAt(0).props(); 46 | expect(d).to.equal(path); 47 | }); 48 | 49 | it("verify svg > path.style.fill", () => { 50 | const svgElement = shallow(); 51 | const { style } = svgElement.childAt(0).props(); 52 | expect(style.fill).to.equal('currentColor'); 53 | }); 54 | 55 | }); 56 | 57 | describe("", () => { 58 | 59 | it("verify size: number", () => { 60 | const svgElement = shallow(); 61 | const { width } = svgElement.props().style; 62 | expect(width).to.equal('3rem'); 63 | }); 64 | 65 | it("verify size: string", () => { 66 | const svgElement = shallow(); 67 | const { width } = svgElement.props().style; 68 | expect(width).to.equal('1em'); 69 | }); 70 | 71 | }); 72 | 73 | describe("", () => { 74 | 75 | it("verify horizontal: boolean", () => { 76 | const svgElement = shallow(); 77 | const { transform } = svgElement.props().style; 78 | expect(transform).to.equal('scaleX(-1)'); 79 | }); 80 | 81 | it("verify horizontal: boolean = true", () => { 82 | const svgElement = shallow(); 83 | const { transform } = svgElement.props().style; 84 | expect(transform).to.equal('scaleX(-1)'); 85 | }); 86 | 87 | it("verify horizontal: boolean = false", () => { 88 | const svgElement = shallow(); 89 | const { transform } = svgElement.props().style; 90 | expect(transform).to.equal(undefined); 91 | }); 92 | 93 | }); 94 | 95 | describe("", () => { 96 | 97 | it("verify vertical: boolean", () => { 98 | const svgElement = shallow(); 99 | const { transform } = svgElement.props().style; 100 | expect(transform).to.equal('scaleY(-1)'); 101 | }); 102 | 103 | it("verify vertical: boolean = true", () => { 104 | const svgElement = shallow(); 105 | const { transform } = svgElement.props().style; 106 | expect(transform).to.equal('scaleY(-1)'); 107 | }); 108 | 109 | it("verify vertical: boolean = false", () => { 110 | const svgElement = shallow(); 111 | const { transform } = svgElement.props().style; 112 | expect(transform).to.equal(undefined); 113 | }); 114 | 115 | }); 116 | 117 | describe("", () => { 118 | 119 | it("verify rotate: number = 90", () => { 120 | const svgElement = shallow(); 121 | const { transform } = svgElement.props().style; 122 | expect(transform).to.equal('rotate(90deg)'); 123 | }); 124 | 125 | }); 126 | 127 | describe("", () => { 128 | 129 | it("verify color: string = '#000'", () => { 130 | const svgElement = shallow(); 131 | const { fill } = svgElement.childAt(0).props().style; 132 | expect(fill).to.equal('#000'); 133 | }); 134 | 135 | }); 136 | 137 | describe("", () => { 138 | 139 | it("verify spin creates