diff --git a/README.md b/README.md index a44c3e6..8d99c27 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Material Design Icons for Material-UI [![npm](https://img.shields.io/npm/v/mdi-material-ui/legacy.svg)](https://www.npmjs.com/package/mdi-material-ui) -[![Material Design Icons version](https://img.shields.io/badge/mdi-v3.6.95-blue.svg)](https://github.com/Templarian/MaterialDesign-SVG/) +[![Material Design Icons version](https://img.shields.io/badge/mdi-v3.7.95-blue.svg)](https://github.com/Templarian/MaterialDesign) +[![Material Design Icons version](https://img.shields.io/badge/mdi--light-v0.2.63-blue.svg)](https://github.com/Templarian/MaterialDesignLight) This module provides [Material-UI][material-ui] `` components for all [Material Design Icons][md-icons]. This is pretty handy if you use React and Material-UI @@ -22,14 +23,19 @@ npm install mdi-material-ui@legacy --save Every icon is exported with its original name in PascalCase. So `coffee` becomes `Coffee`, `cloud-print-outline` is exported as `CloudPrintOutline` and so on. +The Material Design _Light_ icons are included in the `/light` subdirectory. + ### With tree-shaking If your environment supports tree-shaking and you are sure that it works fine in your setup, you can simply import the icons as follows: ```js import { Coffee, Food } from 'mdi-material-ui' +import { Camera, Settings } from 'mdi-material-ui/light' + + ``` ### Without tree-shaking @@ -38,21 +44,13 @@ If your environment doesn't support tree-shaking, you should only import the ico ```js import Coffee from 'mdi-material-ui/Coffee' import Food from 'mdi-material-ui/Food' +import Camera from 'mdi-material-ui/light/Camera' +import Settings from 'mdi-material-ui/light/Settings' -``` - -If you think that this is far too verbose (I agree!), consider using [babel-plugin-direct-import](https://github.com/umidbekkarimov/babel-plugin-direct-import). Install it and adjust your `.babelrc` by adding the following snippet to the plugins section: - -```js -{ - // ... - plugins: [ - // ... - ["direct-import", ["mdi-material-ui"]] - ] -} + + ``` ## License diff --git a/generate-module.js b/generate-module.js index 53f30b8..05b2636 100755 --- a/generate-module.js +++ b/generate-module.js @@ -13,8 +13,15 @@ const pick = require('lodash.pick') svgPath: path })) + const lightIcons = Object.entries(require('@mdi/light-js')) + .filter(([name]) => name.indexOf('mdil') === 0) + .map(([name, path]) => ({ + name: pascalCase(name.substr(4)), // remove mdil prefix + svgPath: path + })) + fse.removeSync(path.join(__dirname, 'package')) - fse.mkdirpSync(path.join(__dirname, 'package')) + fse.mkdirpSync(path.join(__dirname, 'package', 'light')) for (const { name, svgPath } of icons) { const code = `import createIcon from './util/createIcon' @@ -32,18 +39,39 @@ const pick = require('lodash.pick') `) } - // es2015 module syntax - const allExports = icons.map(({ name }) => `export { default as ${name} } from './${name}'`).join('\n') - fse.writeFileSync(path.join(__dirname, 'package', 'index.es.js'), allExports) + for (const { name, svgPath } of lightIcons) { + const code = `import createIcon from '../util/createIcon' + export default createIcon('${svgPath}') + ` + + // commonjs module syntax + fse.writeFileSync(path.join(__dirname, 'package', 'light', `${name}.js`), babel.transform(code, { + presets: ['es2015', 'react', 'stage-0'], + compact: process.env.NODE_ENV === 'production' + }).code) + + // typescript definition + fse.writeFileSync(path.join(__dirname, 'package', 'light', `${name}.d.ts`), `export { default } from '@material-ui/core/SvgIcon' + `) + } - // typescript index definition (looks exactly the same) - fse.writeFileSync(path.join(__dirname, 'package', 'index.d.ts'), allExports) + const generateIndexFiles = (destination, icons) => { + // es2015 module syntax + const allExports = icons.map(({ name }) => `export { default as ${name} } from './${name}'`).join('\n') + fse.writeFileSync(path.join(destination, 'index.es.js'), allExports) + + // typescript index definition (looks exactly the same) + fse.writeFileSync(path.join(destination, 'index.d.ts'), allExports) + + // commonjs module + fse.writeFileSync(path.join(destination, 'index.js'), babel.transform(allExports, { + plugins: ['transform-es2015-modules-commonjs'], + compact: process.env.NODE_ENV === 'production' + }).code) + } - // commonjs module - fse.writeFileSync(path.join(__dirname, 'package', 'index.js'), babel.transform(allExports, { - plugins: ['transform-es2015-modules-commonjs'], - compact: process.env.NODE_ENV === 'production' - }).code) + generateIndexFiles(path.join(__dirname, 'package'), icons) + generateIndexFiles(path.join(__dirname, 'package', 'light'), lightIcons) // createIcon function fse.mkdirSync(path.join(__dirname, 'package', 'util')) @@ -57,8 +85,10 @@ const pick = require('lodash.pick') // update readme const mdiVersion = require(path.join(require.resolve('@mdi/js'), '..', '..', 'package.json')).version + const mdiLightVersion = require(path.join(require.resolve('@mdi/light-js'), '..', '..', 'package.json')).version let readme = await fse.readFile(path.join(__dirname, 'README.md'), 'utf-8') readme = readme.replace(/img\.shields\.io\/badge\/mdi-v(.+?)-blue\.svg/g, `img.shields.io/badge/mdi-v${mdiVersion}-blue.svg`) + readme = readme.replace(/img\.shields\.io\/badge\/mdi--light-v(.+?)-blue\.svg/g, `img.shields.io/badge/mdi--light-v${mdiLightVersion}-blue.svg`) await fse.writeFile(path.join(__dirname, 'README.md'), readme, 'utf-8') // copy other files diff --git a/package-lock.json b/package-lock.json index 48f708b..558a03d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -173,9 +173,15 @@ } }, "@mdi/js": { - "version": "3.6.95", - "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.6.95.tgz", - "integrity": "sha512-9ICUom79Gw28Q8Cp6CX0VBd/Zy7NtIZrNolqIoYoKeuQmROhJ+1U54cxTuaGYHx+z62FIdx98IL3buMFAKwA/A==", + "version": "3.7.95", + "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.7.95.tgz", + "integrity": "sha512-R0Xt8JCOxPurdAv1nCLg3mazRKT1W8uyNVCJHF6JjbfgZyTm/Ct+G/4Vu+NhdXfpr/me/1kZkyDNq3Lh/vKgkg==", + "dev": true + }, + "@mdi/light-js": { + "version": "0.2.63", + "resolved": "https://registry.npmjs.org/@mdi/light-js/-/light-js-0.2.63.tgz", + "integrity": "sha512-+SUtJIOxvEy6DiVq0wTRPIzVuoPB5fhnubmzaN7e2ew0v3/nvnpC4mqbGCjiTK0diVd3+zvhEQHZzPDErGb1fg==", "dev": true }, "@storybook/addon-actions": { diff --git a/package.json b/package.json index df82173..5223491 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ }, "homepage": "https://github.com/TeamWertarbyte/mdi-material-ui#readme", "devDependencies": { - "@mdi/js": "^3.6.95", + "@mdi/js": "^3.7.95", + "@mdi/light-js": "^0.2.63", "@storybook/react": "^3.4.11", "ava": "^0.25.0", "babel-core": "^6.8.0", diff --git a/stories/index.js b/stories/index.js index 0f2a810..541c766 100644 --- a/stories/index.js +++ b/stories/index.js @@ -4,6 +4,7 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' import getMuiTheme from 'material-ui/styles/getMuiTheme' const icons = require('../package/index') +const lightIcons = require('../package/light/index') function themed (children) { return ( @@ -15,7 +16,7 @@ function themed (children) { ) } -const iconStories = storiesOf('Icons', module) +const iconStories = storiesOf('Material Design Icons', module) iconStories.add(`all icons (${Object.keys(icons).length.toLocaleString()})`, () => themed(
{Object.keys(icons).map((icon) => { @@ -29,3 +30,18 @@ Object.keys(icons).sort().forEach((icon) => { const Icon = icons[icon] iconStories.add(icon, () => themed()) }) + +const lightIconStories = storiesOf('Material Design Icons Light', module) +lightIconStories.add(`all icons (${Object.keys(lightIcons).length.toLocaleString()})`, () => themed( +
+ {Object.keys(lightIcons).map((icon) => { + const Icon = lightIcons[icon] + return + })} +
+)) + +Object.keys(lightIcons).sort().forEach((icon) => { + const Icon = lightIcons[icon] + lightIconStories.add(icon, () => themed()) +}) diff --git a/test.js b/test.js index 7026881..e18bcfe 100644 --- a/test.js +++ b/test.js @@ -4,6 +4,7 @@ import renderer from 'react-test-renderer' import fs from 'fs' import { MuiThemeProvider } from 'material-ui/styles'; const commonjsIcons = require('./package/index') +const commonjsIconsLight = require('./package/light/index') test('the npm package', (t) => { // should set sideEffects to false to allow webpack to optimize re-exports @@ -22,6 +23,7 @@ for (const iconName of Object.keys(commonjsIcons)) { t.is(commonjsIcons[iconName].muiName, 'SvgIcon') }) } + test('ES module index file', (t) => { const esmReExports = fs.readFileSync('./package/index.es.js', 'utf-8') .split('\n') @@ -34,3 +36,24 @@ test('ES module index file', (t) => { t.truthy(commonjsIcons[match[1]]) } }) + +for (const iconName of Object.keys(commonjsIconsLight)) { + test(`light icons > ${iconName}`, (t) => { + const renderedIcon = renderer.create(React.createElement(commonjsIconsLight[iconName])).toJSON() + t.is(renderedIcon.type, 'svg') + t.is(commonjsIconsLight[iconName].muiName, 'SvgIcon') + }) +} + +test('mdi-light ES module index file', (t) => { + const esmReExports = fs.readFileSync('./package/light/index.es.js', 'utf-8') + .split('\n') + .filter((line) => line.length > 0) + t.is(esmReExports.length, Object.keys(commonjsIconsLight).length) + + for (const line of esmReExports) { + const match = line.match(/^export \{ default as (.+?) \} from '\.\/(.+?)'$/) + t.is(match[1], match[2]) + t.truthy(commonjsIconsLight[match[1]]) + } +}) diff --git a/update.sh b/update.sh index a1e1fb9..461acbd 100755 --- a/update.sh +++ b/update.sh @@ -1,3 +1,3 @@ #!/bin/sh -npm i --save-dev @mdi/js@latest +npm i --save-dev @mdi/js@latest @mdi/light-js@latest ./generate-module.js