After a lot of searching, I can't seem to find a solution for this.
I'm using forawesome icons on my main page, and on load they are huge for a short period of time.
here is an example: https://makeyka.herokuapp.com/
I've tried
import {config} from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
then trying to add the css with no luck
Turn off autoAddCss:
import { config } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Load in CSS directly in SCSS file:
#import 'node_modules/#fortawesome/fontawesome-svg-core/styles'
And in your style put this:
<style jsx global>{`
...
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
please follow the link: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
Basically this question is abut React.js. However I was stumbling over the very same issue in context of Vue.js. This solution of mine is basically meant to work with Vue.js in context of single-file components.
Insert this code in your entry code file:
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
Now, prepend another block addressing the required file to any existing <style> block in your root element's component:
<style src="#fortawesome/fontawesome-svg-core/styles.css"></style>
class .hero-section-content-intro(container for all font Icons) has width: 300;
until CSS file for Icon is not loaded all icons takes width : 300 (of parent)
you need to handle this case to resolve issue.
add font-size for icons.
Related
After Next JS v13, #next/font helps for best performance. Before the package existed, before I used the CDN #import google font in my global CSS
/* path: ./styles/global.css */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap");
Now I want to migrate and using #next/font#13.0.2
/* path: ./pages/_app.tsx */
import { Poppins } from "#next/font/google";
const poppins = Poppins({
weight: "800", // I want this font-weight has 400,500,600,700,800,900
});
function MyApp({ Component, pageProps }) {
return (
<>
<style jsx global>{`
html {
font-family: ${poppins.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</>
);
}
I've been try to using array instead:
const poppins = Poppins({
weight: ["400", "500", "600", "700", "800", "900"],
});
but the font used always 400 only
Using CDN on CSS:
Using #next/font#13.0.2:
I want to make the font-weight has 400,500,600,700,800,900 similar like CDN on my CSS.
How to make it work and keep it simple? | Expecting an answer on how to use #next/font to add multiple font weights at once.
Thanks
According to the next docs, you can enter "a range of values if it's a variable font such as '100 900'."
Have you tried something like '400 900', to import all of the weights between 400 and 900 for your case? Or you can pass an array of specific font weights you want.
What fixed it for me was adding display: "block", "swap" or "fallback" as the font-display option, because for the default value "optional" the browser was omitting to set the font and/or the font-weight for some reason (perhaps too long loading time or potential layout shift).
// pages/_app.js
import { Nunito } from "#next/font/google";
const nunito = Nunito({
subsets: ["latin"],
display: "fallback", // <--
});
But, using "block" obviously could make the site feel less fast, and "swap"/"fallback could cause some noticeable layout shifting, so the default behavior of optionally applying fonts is meant to be beneficial for UX and probably not so crucial for websites with "conventional fonts".
Here are more infos on font-display options
Edit: In my case, the cause of this issue was importing non-modular css (e.g. import "swiper/css") somewhere in a deeply nested component, which applied some font-family and/or font-weight styles which caused this unexpected behavior. If you do this too, try converting the css to a css module.
I'm trying to render 2 SVG files on my react app.
Here:
But when importing it as a component to React:
import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";
const Envelope = ({closed) => {
return (
<div>
{closed ? <ClosedEnvelope /> : <OpenEnvelope />}
</div>
);
};
It renders the SVG incorrectly:
As you can see the "arrow" on the bottom left side is overflowing.
Seems like an issue with the method I used, because loading the SVG as an image, does work.
What may the problem be?
Thanks in advance
Here are the links to the SVG files:
Close envelope Github
Open envelope Github
Well, Apparently the 2 SVG files, had the same classes and IDs, which caused them to change a little.
If you have the same issue,
Change all the classes in one SVG file.
Change all IDs, also in the CSS like clip-path: URL(#SOME_ID)
This worked for me.
I'm having this weird issue where my styling is not sticking. I have a NavBar set to be 20vh in height. I also have an image set to be 100% in width. However, when I refresh the page, the NavBar height shrinks and the image width increases significantly. I'm not sure what is causing this problem. I have pasted the relevant code below but you can also find the repo for the app at this link (dev branch).
const useStyles = makeStyles((theme) => ({
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
const useStyles = makeStyles((theme) => ({
introImg: {
width: "100%",
height: "auto",
},
}));
const Intro = () => {
const classes = useStyles();
return <img src={marco4sup} className={classes.introImg} />;
};
As you can see, the NavBar is definitely not 20vh and the image is expanding beyond 100% of the page width.
Alert: I will give a pull request on the repo on github so you can implement the code. Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
How It Works
If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components.
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.
Arrow functions aren't supported. Name your functional component.
export default function MyPage () {...
Without export defualt function MyPage() {... it won't use fast refresh therefore your code won't work, to implement it into your Code do the following(for code block1):
export default function UseStyles () {
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
Sorry if there are any grammatical errors my english isn't great.
And also if you want your navbar to be sticky set the position to sticky like the following:
position: sticky;
As much as I have searched about file sizing for react-file-viewer I could not find anything.
I want to use the react-file-viewer to click on a filename hyperlink and open the file (image, document or excel sheeet) in a new page. The rendering works fine, except for the image/document sizing.
I have the following example:
import React from "react";
import FileViewer from "react-file-viewer";
import { Fragment } from "react";
import imGurPic from "./MainBody/imGurPic.ts";
const MainBody = () => {
const file =imGurPic;
const type = "jpeg";
return (
<Fragment>
<FileViewer fileType={type} filePath={file} />
</Fragment>
);
};
export default MainBody;
The imGurPic is an image I picked randomly from imGur because of its large size (3024x4032 pixels) (don't worry it is a cat image... link here... I converted into a base64 string that I use in the filePath prop of the FileViewer component. Ultimately, it will be a base64 string coming from a db as a byte array.
In the following sandbox I managed to create a demo, only to find out that it is WAY too small (72*96px). I do not really understand why it would take so little space. Also, any document or excelsheet I enter, the maximum height is 96px. How can I change it? It seems to inherit from a parent element but the Mainbody takes all the available space between header and footer.
Any help on this will be appreciated.
Here is the sandbox -->sandbox demo
And in case someone cannot open it, here is a screenshot -->
Had to figure this out as well. If you want your image to scale to fit your sizing requirements, just make height=100% in the surrounding div. E.g.
<div style={{ height: '100%' }}>
<ReactFileViewer />
</div>
If you don't want the image scaled at all, then it's a little trickier. I've had to resort to some messy CSS to override the hardwired width and height settings:
.pg-viewer-wrapper {
overflow-y: unset !important;
}
.photo-viewer-container {
width: unset !important;
height: unset !important;
}
.photo-viewer-container > img {
width: unset !important;
height: unset !important;
}
It would be great if this component had features like scaling (e.g. fit, fill, percentage) but I don't think the library is being maintained any more (looking at the old PRs that are still waiting), so would recommend forking and implementing a cleaner solution than what I have done.
As long as I don't use any routers or the attribute smooth on my links, everything is drawn correctly.
Now I wanted to use the manhattan router and things started to get weird. Every link is drawn as a filled element instead of a simple line.
It seems to me that something else does modifications on the links which somehow interferes.
Furthermore attributes like link.attr({'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }}) are completely ignored. The black arrow heads are still shown.
Any ideas?
JointJS library core files are joint.js and joint.css. Please make sure that none of them is missing.
JointJS + dependencies (jQuery, lodash, backbone)
<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>
I had to add fill:none to both .connection-wrap and .connection to clean up.
I am using joint.js library in react.js application and I encountered the same issue.
Indeed the problem was with the missing styles.
In my package.json the joint.js library is declared just like that:
"jointjs": "^2.2.1",
In order to add styles, I had to add the following line to import styles: import "../../node_modules/jointjs/css/layout.css";
I have added display: none; to .link-tools and it worked for me.