├── .babelrc ├── replace.sh ├── .gitignore ├── LICENSE ├── get-mdi-svgs.js ├── README.md └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } -------------------------------------------------------------------------------- /replace.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | find icons -type f -print0 | xargs -0 sed -i "" "s/var _Svg.*//g" 4 | find icons -type f -print0 | xargs -0 sed -i "" "s/_SvgIcon2.default,/'svg',/g" 5 | find icons -type f -print0 | xargs -0 sed -i "" "s/props,/{ style: {width: (props.size || '24px'), height: (props.size || '24px')}, viewBox: (props.viewBox || '0 0 24 24'), className: props.className },/g" 6 | find icons -type f -print0 | xargs -0 sed -i "" "s/.*muiName.*;//g" 7 | find icons -type f -print0 | xargs -0 sed -i "" "s/^var _pure.*//g" 8 | find icons -type f -print0 | xargs -0 sed -i "" "s/.*pure2.default.*//g" 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | material-ui 30 | svg 31 | jsx 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 David Lu 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 | 23 | -------------------------------------------------------------------------------- /get-mdi-svgs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var https = require('https'); 4 | var fs = require('fs'); 5 | var join = require('path').join; 6 | 7 | function getMdiApi(path, cb) { 8 | return https.get({ 9 | host: 'materialdesignicons.com', 10 | path: '/api' + path 11 | }, function(response) { 12 | var body = ''; 13 | response.on('data', function(d) { 14 | body += d; 15 | }); 16 | response.on('end', function() { 17 | var parsed = null; 18 | try { 19 | parsed = JSON.parse(body); 20 | } catch (e) { 21 | console.error('Did not receive JSON:', body); 22 | } 23 | cb(parsed); 24 | }); 25 | }); 26 | } 27 | 28 | function buildSvg(pathData) { 29 | return ''; 30 | } 31 | 32 | function writeSvg(svg, name) { 33 | fs.writeFile(join(__dirname, 'svg', name + '.svg'), svg, function(err) { 34 | if (err) { 35 | console.error('Error while writing svg:', err); 36 | } 37 | }); 38 | } 39 | 40 | getMdiApi('/init', function (init) { 41 | var mainPackageId = init.packages[0].id; 42 | getMdiApi('/package/' + mainPackageId, function(data) { 43 | data.icons.forEach(function (icon) { 44 | writeSvg(buildSvg(icon.data), icon.name); 45 | }); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-mdi 2 | 3 | Material-UI community Material Design Icons. 4 | 5 | [Community Material Design Icons](https://materialdesignicons.com/) as svg react components, built with [icon-builder](https://github.com/gabriel-miranda/material-ui/tree/master/icon-builder) from Material-UI. 6 | 7 | Special thanks to [Austin Andrews](https://github.com/Templarian) for managing Material Design Icons. 8 | 9 | ## Installation 10 | 11 | ```sh 12 | npm install react-mdi 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import React from 'react'; 19 | 20 | import AccountIcon from 'react-mdi/icons/account'; 21 | 22 | export default class Account extends React.Component { 23 | render() { 24 | return ( 25 | 26 | ); 27 | } 28 | } 29 | ``` 30 | 31 | ## Props 32 | | Prop | Default value | Usage | 33 | |:------------|:--------------|:-------------------------------------------------------------------------------------------------------| 34 | | `size` | **24** | Used to set the `height`and `width` in the style attribute | 35 | | `className` | **null** | Used to apply a css class to the component and properly style it | 36 | 37 | ## Build 38 | 39 | ```sh 40 | npm run build 41 | ``` 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-mdi", 3 | "version": "0.5.7", 4 | "description": "Community Material Design Icons as react svg components", 5 | "main": "", 6 | "scripts": { 7 | "clone-material-ui": "git clone https://github.com/gabriel-miranda/material-ui.git && cd material-ui/packages/icon-builder && npm install", 8 | "get-mdi-svgs": "mkdir -p svg && node get-mdi-svgs.js", 9 | "make-jsx": "node material-ui/packages/icon-builder/build.js --output-dir jsx --svg-dir svg --mui-require absolute", 10 | "make-js": "babel ./jsx --out-dir ./icons", 11 | "build": "npm install && npm run clone-material-ui && npm run get-mdi-svgs && npm run make-jsx && npm run make-js && npm run replace && npm run clean-all", 12 | "clean-all": "rm -rf material-ui jsx svg", 13 | "replace": "sh ./replace.sh" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/gabriel-miranda/react-mdi.git" 18 | }, 19 | "keywords": [ 20 | "react", 21 | "react-component", 22 | "material design", 23 | "icons", 24 | "icon", 25 | "svg", 26 | "material-ui", 27 | "mdi" 28 | ], 29 | "author": "David Lu & Gabriel Miranda", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/gabriel-miranda/react-mdi/issues" 33 | }, 34 | "homepage": "https://github.com/gabriel-miranda/react-mdi#readme", 35 | "peerDependencies": { 36 | "react": "*" 37 | }, 38 | "dependencies": { 39 | "react-addons-pure-render-mixin": "*" 40 | }, 41 | "devDependencies": { 42 | "babel-cli": "^6.11.4", 43 | "babel-preset-es2015": "^6.13.2", 44 | "babel-preset-react": "^6.11.1" 45 | } 46 | } 47 | --------------------------------------------------------------------------------