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/user-event": "^7.1.2",
"http-server": "^0.12.3",
"material-icons-react": "^1.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",

35
public/index.html
View file

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

4
src/components/app.js
View file

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