import { ReactComponent as SVGTest } from '../images/299.svg'
Is there a way to extract the width from the SVGTest during the return.
I want to compare the default width of the SVG vs the width of the window. If less than I want to use the SVG width.
At the moment I set the width to 290px for ALL hundreds of SVGs in the App and the height adjusts accordingly.
However some SVGs are wider and for those I would prefer to use its width over my default 290px.
You should avoid hardcoding your SVG, also it's a good practice to treat SVG as a component.
Try resetting your SVG's width, height with CSS and use viewBox for scalling.
This way it will scale its container (Box in the next example)
const Box = styled.div`
width: 300px;
background-color: palevioletred;
`;
const SVGContainer = styled.div`
svg {
width: 100%;
height: 100%;
}
`;
// Default width,height of SVG are 100px
const App = () => (
<Box>
<SVGContainer>
<SVG />
</SVGContainer>
</Box>
);
Related
I'm designing a simple react app using styled components. I'm trying to make it more responsive.
So I created a component(Ad) with props values of width and height.
Depending upon the width and height values, the font size should change.
This is how made my Ad component.
const AdContainer = styled.div`
max-width: ${props=>props.width};
max-height: ${props=>props.height};
`;
const Adp = styled.p`
font-size: ${props=>props.width>"870px"?"24px":"16px"};
`;
function Ad({height,width}) {
return (
<AdContainer height={height} width={width}>
<AdTitle>Hello</AdTitle>
</AdContainer>
);
}
Consider this parent component
function ProductPage() {
return (
<>
<Ad width={"1920px"} height={"600px"}/>
</>
);
}
export default ProductPage;
When we pass width=1920px and height=600px, the font size of Adtitle should change into 24px because of this
const Adp = styled.p`
font-size: ${props=>props.width>"870px"?"24px":"16px"};
`;
But it is not changing and sticks to 16px.
What can I do to rerender this component whenever the screen size changes?
Or is there any other alternatives to solve this so that wherever I use this Ad component, the font size should change with respect to the given props width and height value?
You are trying to compare string to string as numbers. Do not do like this. Do it like this.
const Adp = styled.p`
font-size: ${p => p.width > 870 ? "24px" : "16px"};
`;
// And pass the props like this
<Adp width={1920} height={600}/>
// AdContainer
const AdContainer = styled.div`
max-width: ${p => `${p.width}px`};
max-height: ${p => `${p.height}px`};
`;
So I am using react icons and I have two different icons that I am styling with styled components. My issue is that they essentially have the exact same styles, but the only difference is which icon I am choosing to style.
I don't know how to combine both icons into one styled component
Here is my code
const backArrow = styled(IoArrowBack)`
width: 50px;
height: 50px;
`;
const forwardArrow = styled(IoArrowForward)`
width: 50px;
height: 50px;
`;
Since I am using styled components, I just pass the icon into the () based on which one I want to style. The issue is I have over 12 lines of the exact same styles for both icons. It doesn't make sense to repeat the exact styles
How would I create one styled component, but display two different icons?
Example concept like this
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
But then the issue occurs if I were to add them to my JSX
Cause then how would I even add the code?
I can't do
<arrrowIcon>Back arrow</arrowIcon>
<arrrowIcon>Forward arrow</arrowIcon>
So it wouldn't know which icon is which.
Is this even possible with styled components, or would I just have to copy and paste the same styles for each icon?
This piece of code is a bit weird to me, I think this is not a valid code
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
However you can do a trick to get a shared style
const sharedIconStyle = css`
width: 50px;
height: 50px;
`
And
const styledArowBack= styled(IoArrowBack)`
${sharedIconStyle}
`
const styledArrowForward = styled(IoArrowForward)`
${sharedIconStyle}
`;
Could you just do it with React?
import React from "react";
import "./styles.css";
import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";
export default function App() {
return (
<div className="App">
<SizedIcon Icon={icon1} />
<SizedIcon Icon={icon2} />
</div>
);
}
const SizedIcon = ({ size = 50, Icon }) => {
console.log(typeof Icon);
return (
<div>
<Icon width={size} height={size} />
</div>
);
};
What I did is wrapped the icons in a div and styled the div, for example change the icon colors to red:
const IconStyles = styled.div`
color: red;
`
<IconStyles>
<IoArrowBack />
</IconStyles>
<IconStyles>
<IoArrowForward />
</IconStyles>
If you want to change the size of the icons then add a font-size in the div containing the icons, that is how I personally do it.
I'm currently using VideoPlayer from react-video-js-player and I'm trying to override the default height/width styles to have the video inherit the parents height/width.
Since VideoPlayer is simply React wrapper for VideoJS. I assume the styles and class names are the same.
I tried doing something like this:
import VideoPlayer from "react-video-js-player"
export const VideoJS = styled(VideoPlayer)`
position: relative;
height: 100%;
`
Setting the height and width to be 100% in the props doesn't work
<VideoPlayer
controls="true"
height={"100%}
width={"100%"}
src="examplevideo"
/>
.
the parent container is set to 100% width and height.
Any ideas?
I would do something like this , first inspect the video player element in browser to know what is its wrapper, let's say its a div . you can do something like this :
export const VideoPlayerWrapper= styled.div`
>div{
//this will target the videoPlayerwrapper
position: relative;
height: 100%;
}
`
I use the reakt photo gallery library; my component gets an array of images as props and converts it into an array of objects with fields {src, width, height}. Everything works well, but the problem is that I have a specific height for the block, into which the gallery should be inserted. the height of the block is significantly less than the height of the entire block of the gallery, so I assumed that the pictures would scroll horizontally, and they still continue to scroll vertically, how can I make a horizontal scroll?
import React from 'react';
import Gallerys from 'react-photo-gallery';
const Content = styled.div`
height: 700px;
width: auto;
overflow-x: scroll;
img {
border-radius:10px;
}
`;
class Gallery extends React.Component {
render() {
return (
<Content>
<Gallerys direction={'row'} margin={40} photos={images} />
</Content>
);
}
}
export default Gallery;
please check the answer here https://codesandbox.io/embed/lively-sun-zqe7g
Note: Use this in your style.css/ style.scss
//use in css
.react-photo-gallery--gallery div {
flex-flow: nowrap !important;
}
//use in sass/scss
.react-photo-gallery--gallery{
div{
flex-flow: nowrap !important;
}
}
I'm using: https://react.semantic-ui.com/elements/image#image-example-avatar
<Image avatar width={32} height={32} src={'/xxx.jpg'} />
Problem is, the Image avatar is not using the width and height params, and instead is using the assigned CSS:
.ui.avatar.image, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg {
margin-right: .25em;
display: inline-block;
width: 2em;
height: 2em;
border-radius: 500rem;
}
How can I set the width and height for a <Image avatar... > using Semantic UI React?
Avatar image size is tied to the effective font size. A quick way to control the effective font size is
<Image style={{'font-size':42}} avatar src={'/xxx.jpg'}/>