yolokube/dashboard
yolokube/dashboard
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

Custom App Icon Component

Browse source
This commit is contained in:
Bastian Meissner 2020-07-08 15:54:23 +02:00
parent b532a39be5
commit 546fdc497f
4 changed files with 65 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -7,7 +7,6 @@
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"http-server": "^0.12.3", "http-server": "^0.12.3",
"material-icons-react": "^1.0.4",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",

35
public/index.html
View file

@ -1,17 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet"> <link
<title>Dashboard</title> href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900"
</head> rel="stylesheet"
<body> />
<noscript>You need to enable JavaScript to run this app.</noscript> <link
<div id="root"></div> href="https://fonts.googleapis.com/icon?family=Material+Icons"
</body> rel="stylesheet"
/>
<title>Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html> </html>

4
src/components/app.js
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import MaterialIcon from 'material-icons-react'; import Icon from './icon';
import styled from 'styled-components'; import styled from 'styled-components';
import selectedTheme from './themeManager'; import selectedTheme from './themeManager';
@ -43,7 +43,7 @@ const AppDescription = styled.p`
export const App = ({ name, icon, url, displayURL }) => ( export const App = ({ name, icon, url, displayURL }) => (
<AppContainer> <AppContainer>
<IconContainer> <IconContainer>
<MaterialIcon icon={icon} color={selectedTheme.mainColor} /> <Icon name={icon} color={selectedTheme.mainColor} />
</IconContainer> </IconContainer>
<DetailsContainer> <DetailsContainer>
<AppLink href={url}>{name}</AppLink> <AppLink href={url}>{name}</AppLink>

42
src/components/icon.js Normal file
View file

@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
const IconContainer = styled.i`
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
`;
export const Icon = ({ name, color, size }) => {
let Container = IconContainer;
if (size) {
Container = styled(IconContainer)`
text-color: ${color};
font-size: ${size};
`;
}
return <Container>{name}</Container>;
};
export default Icon;