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

[icons] Update the icons #16166

Merged
merged 1 commit into from Jun 12, 2019
Merged

[icons] Update the icons #16166

merged 1 commit into from Jun 12, 2019

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jun 11, 2019

We haven't run the script for at least a year. It seems that Google has cleanup a bit their icons :). For instance:

diff --git a/packages/material-ui-icons/src/TimelineRounded.js b/packages/material-ui-icons/src/TimelineRounded.js
index 8e450020b..e01dee7be 100644
--- a/packages/material-ui-icons/src/TimelineRounded.js
+++ b/packages/material-ui-icons/src/TimelineRounded.js
@@ -2,5 +2,5 @@ import React from 'react';
 import createSvgIcon from './utils/createSvgIcon';

 export default createSvgIcon(
-  <React.Fragment><defs><path id="a" d="M0 0h24v24H0z" /></defs><defs><path id="b" d="M0 0h24v24H0z" /></defs><g><path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" /><path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" /></g></React.Fragment>
+  <React.Fragment><defs><path id="a" d="M0 0h24v24H0z" /></defs><defs><path id="b" d="M0 0h24v24H0z" /></defs><path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2zm0 0c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" /></React.Fragment>
 , 'TimelineRounded');

The command was run with:

cd packages/material-ui-icons
yarn src:download
yarn src:icons

Closes #16159

After:
0 0 0 0_3000_components_icons_

The screenshot was made with:

/pages/components/icons.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

const requireIcons = require.context('../../packages/material-ui-icons/src', false, /js$/);

const styles = theme => ({
  root: {
    color: theme.palette.text.primary,
  },
});

function SvgMaterialIconsAll(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      {requireIcons.keys().map(key => {
        if (key === './index.js' || key === './utils/createSvgIcon.js') {
          return null;
        }

        const Icon = requireIcons(key).default;
        return <Icon key={key} />;
      })}
    </div>
  );
}

SvgMaterialIconsAll.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SvgMaterialIconsAll);

@oliviertassinari oliviertassinari added the package: icons Specific to @mui/icons label Jun 11, 2019
@mui-pr-bot
Copy link

No bundle size changes comparing 34c99ce...92b2c21

Generated by 🚫 dangerJS against 92b2c21

@oliviertassinari oliviertassinari added the new feature New feature or request label Jun 11, 2019
@eps1lon eps1lon merged commit 4f7aa9b into mui:master Jun 12, 2019
@oliviertassinari oliviertassinari deleted the icons-update branch June 12, 2019 08:50
@Dror88
Copy link
Contributor

Dror88 commented Jun 16, 2019

Hi @oliviertassinari, after the last icons update @material-ui/icons/StarRounded shows a filled square. was the icon removed or something?

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jun 16, 2019

The problem seems to come from the icons Google publishes: https://material.io/tools/icons/static/icons/round-star-24px.svg. They are corrupted.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jun 16, 2019

I have found a simple fix. I'm on it. The problem can be reproduced with:

import React from 'react';
import StarRounded from '@material-ui/icons/StarRounded';
import QueueMusicOutlined from '@material-ui/icons/QueueMusicOutlined';
import ReplayOutlined from '@material-ui/icons/ReplayOutlined';
import PauseCircleFilledOutlined from '@material-ui/icons/PauseCircleFilledOutlined';

export default () => (
  <>
    <StarRounded />
    <QueueMusicOutlined />
    <ReplayOutlined />
    <PauseCircleFilledOutlined />
  </>
);

Capture d’écran 2019-06-16 à 20 17 55

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request package: icons Specific to @mui/icons
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Timeline icon created duplicate SVG paths
5 participants