Merge pull request #6448 from mbrookes/next-material-ui-icons

[material-ui-icons] Reinstate README and update scripts, update installation.md

docs/getting-started/installation.md

@@ -2,14 +2,34 @@
 
 Material-UI is available as an [npm package](https://www.npmjs.org/package/material-ui).
 
+To install and save in your `package.json` dependencies, run:
+
+```
+npm i -S material-ui
+```
+
 ## Roboto Font
 
 Material-UI was designed with the [Roboto](http://www.google.com/fonts/specimen/Roboto)
-font in mind.
-So be sure to include it in your project.
+font in mind, so be sure to include it in your project.
+
 Here are [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500)
-on how to do so. You can also refer to our [typography page](https://material-ui-1dab0.firebaseapp.com/#/style/typography) for more details.
+on how to do so. You can also refer to our [typography page](/#/style/typography) for more details.
 
 ## Icon Font
 
-In order to use the font `Icon` component, you must add the add the material icons font. Here are [some instructions](http://google.github.io/material-design-icons/#icon-font-for-the-web) on how to do so.
+In order to use the font `Icon` component, or to use icon names (ligatures) directly in components
+that support them, you must first the add the [Material icons](https://material.io/icons/) font. 
+Here are [some instructions](http://google.github.io/material-design-icons/#icon-font-for-the-web) 
+on how to do so.
+
+## SVG Icons
+
+In order to use prebuilt SVG Material icons, such as those found in the [component demos](/#/component-demos) 
+you must first install the [material-ui-icons](https://www.npmjs.org/package/material-ui) package:
+
+```
+npm i -S material-ui-icons
+```
+
+This package replaces the `svg-icons` previously included with Material-UI. 

packages/material-ui-icons/build.js

@@ -51,7 +51,7 @@ function main(options, cb) {
     process.stdout.write = function() {};
   }
 
-  rimraf.sync(options.outputDir); // Clean old files
+  rimraf.sync(`${options.outputDir}/*.js`); // Clean old files
   console.log('** Starting Build');
 
   let renameFilter = options.renameFilter;
@@ -61,8 +61,9 @@ function main(options, cb) {
   if (!_.isFunction(renameFilter)) {
     throw Error('renameFilter must be a function');
   }
-
-  fs.mkdirSync(options.outputDir);
+  if (!fs.existsSync(options.outputDir)){
+    fs.mkdirSync(options.outputDir);
+  }
   const files = glob.sync(path.join(options.svgDir, options.glob));
 
   files.forEach(function(svgPath) {

packages/material-ui-icons/copy-files.js

@@ -76,6 +76,7 @@ function createPackageFile() {
 
 const files = [
   '../../LICENSE',
+  './src/README.md'
 ];
 
 Promise

packages/material-ui-icons/package.json

@@ -22,12 +22,12 @@
     "react-component"
   ],
   "scripts": {
-    "prebuild": "npm run clean",
     "build": "npm run build:icons && npm run build:babel && npm run build:copy-files",
     "build:babel": "babel --presets es2015,react -d ./build ./src",
-    "build:icons": "node ./build.js --output-dir ./src --svg-dir ./node_modules/material-design-icons --glob '/**/production/*_24px.svg' --renameFilter ./filters/rename/material-design-icons.js",
     "build:copy-files": "babel-node ./copy-files.js",
-    "clean": "rimraf build/*.js",
+    "build:icons": "node ./build.js --output-dir ./src --svg-dir ./node_modules/material-design-icons --glob '/**/production/*_24px.svg' --renameFilter ./filters/rename/material-design-icons.js",
+    "clean:": "rimraf build",
+    "prebuild": "npm run clean",
     "test": "grunt"
   },
   "devDependencies": {

packages/material-ui-icons/src/README.md

@@ -0,0 +1,37 @@
+# material-ui-icons
+
+This package provides the Google [Material icons](https://material.io/icons/) packaged as a set of
+[React](https://facebook.github.io/react/) components. These components replace the `svg-icons` included in
+ 0.x.x releases of [Material-UI](http://material-ui.com).
+
+## Installation
+
+Install the package in your project directory with:
+
+```
+npm i -S material-ui-icons
+```
+
+These components use the Material-UI [SvgIcon](http://material-ui.com/#/style/icons) component to
+render the SVG path for each icon, and so a have a peer-dependency on the `next` release of Material-UI.
+
+If you are not already using Material-UI in your project, you can add it with:
+
+```
+npm i -S material-ui@next
+```
+
+## Usage
+
+The import path for each Material icon component includes the icon name in PascalCase.
+
+For example to use the 'access alarm' icon component, import `material-ui-icons/AccessAlarm`.
+
+Note: One exception is '3d rotation', which is named `ThreeDRotation`.
+
+## Upgrading
+
+If you are upgrading an existing project from Material-UI 0.x.x, you will need to revise the import paths 
+from `material-ui/svg-icons/icon-name` to `material-ui-icons/IconName`.
+
+We may provide a [codemod](https://github.com/facebook/codemod) in a future release.