From a217dc8a20b2ac1435c7ce932f32aaf108411a2f Mon Sep 17 00:00:00 2001 From: mbrookes Date: Mon, 27 Mar 2017 23:19:19 +0100 Subject: [PATCH 1/2] [material-ui-icons] Reinstate README, and update scripts --- packages/material-ui-icons/.gitignore | 1 - packages/material-ui-icons/build.js | 7 +++-- packages/material-ui-icons/copy-files.js | 1 + packages/material-ui-icons/package.json | 6 ++-- packages/material-ui-icons/src/README.md | 37 ++++++++++++++++++++++++ 5 files changed, 45 insertions(+), 7 deletions(-) delete mode 100644 packages/material-ui-icons/.gitignore create mode 100644 packages/material-ui-icons/src/README.md diff --git a/packages/material-ui-icons/.gitignore b/packages/material-ui-icons/.gitignore deleted file mode 100644 index efdf28b61d6f3d..00000000000000 --- a/packages/material-ui-icons/.gitignore +++ /dev/null @@ -1 +0,0 @@ -!build/README.md diff --git a/packages/material-ui-icons/build.js b/packages/material-ui-icons/build.js index bd4887a7dc19d6..1a22aa31936f94 100755 --- a/packages/material-ui-icons/build.js +++ b/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) { diff --git a/packages/material-ui-icons/copy-files.js b/packages/material-ui-icons/copy-files.js index f3896ba9bcd904..57b0905622a16a 100644 --- a/packages/material-ui-icons/copy-files.js +++ b/packages/material-ui-icons/copy-files.js @@ -76,6 +76,7 @@ function createPackageFile() { const files = [ '../../LICENSE', + './src/README.md' ]; Promise diff --git a/packages/material-ui-icons/package.json b/packages/material-ui-icons/package.json index 0792eb52abfd38..dc89f561f1cb88 100644 --- a/packages/material-ui-icons/package.json +++ b/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": { diff --git a/packages/material-ui-icons/src/README.md b/packages/material-ui-icons/src/README.md new file mode 100644 index 00000000000000..7a0d73214a8c1f --- /dev/null +++ b/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. From 268eae37f4a32868fbe6df9c97093cdb69cfa665 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Mon, 27 Mar 2017 23:35:23 +0100 Subject: [PATCH 2/2] [docs] Update installation.md for material-ui-icons --- docs/getting-started/installation.md | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 944681ef57c67a..acd32a8466589c 100644 --- a/docs/getting-started/installation.md +++ b/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.