Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Mar 28, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
28 changes: 24 additions & 4 deletions docs/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
1 change: 0 additions & 1 deletion packages/material-ui-icons/.gitignore

This file was deleted.

7 changes: 4 additions & 3 deletions packages/material-ui-icons/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions packages/material-ui-icons/copy-files.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ function createPackageFile() {

const files = [
'../../LICENSE',
'./src/README.md'
];

Promise
Expand Down
6 changes: 3 additions & 3 deletions packages/material-ui-icons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
37 changes: 37 additions & 0 deletions packages/material-ui-icons/src/README.md
Original file line number Diff line number Diff line change
@@ -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.