I'm using material ui icons, is there any way to add plus to icons ?
This is my icon :
import ApartmentIcon from '#mui/icons-material/Apartment';
and that icon should have plus to it like here:
I have been trying to find a way but did not find anything,
these are icons i want plus to them:' CameraAlt,
Apartment,
Web,
Assessment,
Description,', any suggestions ?
Using sx property here is what you need.
<Box sx={{ background: "black" }}>
<Box sx={{ position: "relative", display: "inline", color: "white" }}>
<CameraAltOutlinedIcon sx={{ fontSize: 40 }} />
<AddIcon
sx={{
position: "absolute",
right: "-5px",
bottom: "2px",
color: "black",
fontSize: 22,
strokeWidth: "6",
stroke: "black"
}}
/>
<AddIcon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "white",
fontSize: 22
}}
/>
</Box>
</Box>
I had to use two 'plus' svg AddIcons one inside the other with some stroke to the one on the back to act like a frame for the one on the front and have a better looking result.
The only thing you need to do is adjust the left/right attributes depending the main icon you are using and the colors to match your background.
Here also is a working codepen
i think this is the icon you are looking for
import AddAPhotoIcon from '#mui/icons-material/AddAPhoto';
Here is a solution using styled components:
import * as React from "react";
import { Box } from "#material-ui/core/";
import { CameraAlt } from "#material-ui/icons";
import AddIcon from "#material-ui/icons/Add";
import styled from "styled-components";
const IconContainer = styled(Box)`
background-color: red;
position: absolute;
`;
const PlusIconBack = styled(AddIcon)`
position: absolute;
right: -8px;
bottom: -1px;
color: black;
font-size: 21px;
stroke-width: 3;
stroke: black;
`;
const PlusIconFront = styled(AddIcon)`
position: absolute;
right: -7px;
bottom: 0;
color: white;
font-size: 19px;
`;
function Demo() {
return (
<IconContainer>
<CameraAlt />
<PlusIconBack />
<PlusIconFront />
</IconContainer>
);
}
export default Demo;
The point of it, is to use a container giving it position relative, add your main icon, then add your plus icons with position absolute and place them where you want using left/right top/bottom.
Sandbox: sandbox
Related
I'm using material ui icons, here i have camera icon which has another icon connected to it(AddIcon), i want to have icon for each letter in alphabet but material ui doesnt have it, so i found 'materialdesignicons' which has alphabets.
My question is how to replace that plus (addicon), for example with 'b' alphabet of 'materialdesignicons' ?
my code:
codesandbox: https://codesandbox.io/s/svgiconssize-demo-material-ui-forked-yfs77g?file=/index.tsx:73-134
code:
import * as React from "react";
import Box from "#mui/material/Box";
import Container from "#mui/material/Container";
import AddIcon from "#mui/icons-material/Add";
import CameraAltOutlinedIcon from "#mui/icons-material/CameraAltOutlined";
export default function SvgIconsSize() {
return (
<Container sx={{ background: "black", height: "100vh" }}>
<Box // This is your container
sx={{
position: "relative",
display: "initial",
color: "black", // camera icon takes the fill color from here
width: "50px",
height: "50px"
}}
>
<CameraAltOutlinedIcon sx={{ fontSize: 40, color: "white" }} />
<AddIcon // This acts like a frame for the plus icon for a good looking result
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
fontSize: 22,
strokeWidth: "4",
stroke: "white"
}}
/>
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
</Box>
{/* UNTIL HERE */}
</Container>
);
}
this is what i want to use: import { mdiAlphaB } from '#mdi/js';
so i checked tutorial : https://dev.materialdesignicons.com/getting-started/react
but i would just get rotating 'b'
it should look like this
but instead of plus, there should be 'b'
Any suggestions ?
You have to first install material design icons by running command
npm install #mdi/react #mdi/js
after that import like so
import Icon from '#mdi/react'
import { mdiAlphaB } from "#mdi/js"; // The icon to use
and then replace this
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
with
<Icon //B icon
path={mdiAlphaB}
title="User Profile"
size={2}
color="white"
style={{
position: "absolute",
left: "15px",
top: "-10px"
}}
/>
)
and at the end tweak position property a bit if needed. And voila! you are done. link to codesandbox
I am trying to move individual components with inline styles as I want them in different places of the website. Why is this code not working?
import "./App.css";
import React from "react";
import Window from "./components/Window";
class App extends React.Component {
render() {
return (
<div className="App">
<Window
id="firstWindow"
style={{ position: "relative", left: "200px" }}
number={"1"}
/>
<Window id="secondWindow" number={"2"} />
<Window id="thirdWindow" number={"3"} />
</div>
);
}
}
export default App;
this code works in a different section of the app
import React from "react";
import "./Window.css";
class Window extends React.Component {
render() {
return (
<div
className="square"
style={{ position: "relative", left: "200px" }}
>
{this.props.number}
</div>
);
}
}
export default Window;
Inline style is passed by property name style, use it to set style in the component.
style={ this.props.style }
A demo:
class App extends React.Component {
render() {
return (
<div className="App">
<Window
id="firstWindow"
style={{ position: "relative", left: "200px" }}
number={"1"}
/>
<Window
id="secondWindow"
style={{ position: "relative", left: "100px" }}
number={"2"} />
<Window
id="thirdWindow"
style={{ position: "relative", left: "10px" }}
number={"3"} />
</div>
);
}
}
class Window extends React.Component {
render() {
return (
<div
className="square"
style={ this.props.style }
>
{this.props.number}
</div>
);
}
}
// ========================================
ReactDOM.render(
<App />,
document.getElementById('root')
);
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
So here's a code sandbox with a working example based on your code-
https://codesandbox.io/s/strange-borg-hd2o4?file=/src/App.js
First of all, you need to be using position: absolute if you're going to use left: 200px. When it's position: relative, there's no effect.
Secondly, a better way to style these is to use the ids you've already created and then pass it as a prop to the component, check out the example.
Thirdly, React class components are on the way out - you should be learning the React function approach first. I recommend https://fullstackopen.com/en/.
Hopefully that all makes sense!
I am working on a very simple website consisting of an image, with some text overlaid on top of it. In some cases, the image may be bigger than the screen, and then the user can scroll. However, I would like the overlaid text to remain on-screen, centered, even when the user scrolls. How can I do this?
Here is a basic idea of my code at the moment:
const styles = theme => ({
main_screen: {
position: "relative",
textAlight: "center",
color: "white",
height: '100%',
width: '100%',
margin: "0",
padding: "0"
},
caption: {
color: "yellow",
margin: "1em",
},
overlayText: {
position: "absolute",
width: "100%",
top: "5%",
alignItems:"center"
},
main_image: {
maxwidth: "100%",
maxHeight: "100%",
objectFit:"cover",
display: "block",
margin: "0",
padding: "0",
overflow: "scroll"
},
})
class ExampleSite extends React.Component {
....
render(){
return(
<div id="main-screen" className={classes.main_screen}>
<img id='target-image' onLoad={this.readDims} className={classes.main_image} src={pano_1} alt={""}/>
<div className={classes.overlayText}>
<Typography className={classes.caption} align="center" > {this.state.instructionText} </Typography>
</div>
</div>
)
}
}
position: fixed; on the text object is what you want. MDN - CSS Position
I have a React-mui draggable dialog component on which I am using resizable box.
const styles = theme => ({
resizable: {
position: "relative",
"& .react-resizable-handle": {
position: "absolute",
width: 20,
height: 20,
bottom: 0,
right: 0,
background:
"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
"background-position": "bottom right",
padding: "0 3px 3px 0",
"background-repeat": "no-repeat",
"background-origin": "content-box",
"box-sizing": "border-box",
cursor: "se-resize"
}
}
});
return (
<StyledDialog
open={open}
classes={{root: classes.dialog, paper: classes.paper}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog"
>
<ResizableBox
height={520}
width={370}
minConstraints={[300, 500]}
maxConstraints={[Infinity, Infinity]}
className={classes.resizable}
>
<DialogContent classes={{root: classes.dialogContent}} id="draggable-dialog">
<IconButton className={classes.clearIcon} aria-label="Clear" onClick={onClose}>
<ClearIcon/>
</IconButton>
<iframe
src={hjelpemiddel.url}
title={hjelpemiddel.navn}
width="100%"
height="500px">
</iframe>
</DialogContent>
</ResizableBox>
</StyledDialog>
);
}
I would like to use my own icon instead of the default image used for the ResizableBox. How can I set the icon that I am importing from material icons as background of resizable?
import ZoomOutMapIcon from '#material-ui/icons/ZoomOutMap';
Material-UI is using SVG for the ZoomOutMapIcon. What I would do is convert that SVG to base64 then apply that to the background-url
This is its base64 output: PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+
and I usually use makeStyles for overriding CSS when using Material UI
const useStyles = makeStyles({
resizable: {
position: "relative",
"& .react-resizable-handle": {
position: "absolute",
width: 20,
height: 20,
bottom: 0,
right: 0,
background:
"url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+')",
"background-position": "bottom right",
padding: "0 3px 3px 0",
"background-repeat": "no-repeat",
"background-origin": "content-box",
"box-sizing": "border-box",
cursor: "se-resize"
}
}
});
<ResizableBox
className={classes.resizable}
>
i want to place a popup based on the position of leftnav element. basically place this popup next to the lefnav element such that it is vertically center to leftnav element.
below is the picture of how the popup should be placed
below is my code,
function LeftNav() {
return (
<Wrapper id="left_nav">
</Wrapper>
);
}
const Wrapper = styled.div`
position: absolute;
top: 50%;
right: 16px;
display: flex;
flex-direction: column;
flex: 1;
`;
function PopUp() {
const left_nav_el = document.getElementById('left_nav');
return (
<PopupWrapper />
);
}
const PopupWrapper = styled.div`
width: 400px;
position: relative;
display: none;
`;
i am not sure how to get the top-left corner of the leftnav and use it as coordinates to place the popup in center and 16px away to the leftnav.
could someone help me with this. thanks.
const App = () => {
function LeftNav() {
return (
<div
style={{
height: "50px",
background: "black",
width: "50px"
}}
id="left_nav"
/>
);
}
function PopUp() {
return (
<div
style={{
marginRight: "16px",
height: "100px",
background: "green",
width: "50px"
}}
className="popup"
/>
);
}
return (
<div
style={{ width: "100px", display: "flex", alignItems: "center"}}
className="App"
>
<LeftNav />
<PopUp />
</div>
);
}