I am using react server side rendering and client side rendering (hydrate) with fontawesome but when page is rendering, the icon is huge until it scales down and the correct size class is added to the icon OR the css is loaded (I dont know).
Turn off autoAddCss:
import { library, config } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Load in CSS directly in SCSS file:
#import 'node_modules/#fortawesome/fontawesome-svg-core/styles'
Please, see this article:
https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
In react you need to this in your layout or global config:
import { library, config, dom } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
...
And in your style put this:
<style jsx global>{`
...
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
This is an issue with the CSS loading after the page renders initially, as you have guessed. The solution that I have found is to either make sure the CSS on the server renders on the same page as the icon (depending on what frameworks you are using to manage stylesheets), or to make sure that whatever .css file you are using for this gets loaded before the html renders. This can be done by making sure the link tag for the stylesheet appears near the top of your page.
Related
Hello I am working on simple crud application in react js 18.0.0. My problem is I have my own styles for one component say eg..Home. But the styles which I have used for other components is also getting applied to Home component even though I did not imported it. Can anyone explain why?
I have attached an image for your reference.
In the above image I was in home component. But if you see the styles the container class in forgetPassword.css and login.css is also getting applied in home component. but In home component I did not imported those two css files(forgetPassword.css and login.css)
Yes this is because by default react does not support css or styles.
you can either use css modules(https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)
Or
Use styled components.
I suggest you to try the css modules as that will be beginner friendly and easy.
You need to move your css to seperate file and name it [filename].module.css
In your case Home.module.css
Then in your Home.js component import it like import styles from './Home.module.css'
Then in your component use it like
<div className={styles.container} > ... </div>
I also recommend you not to modify the original bootstrap classes, instead create your custom class and add the overrides there.
eg:
<div className={`${styles.container} ${styles.home-container}`} > ... </div>
I am trying to customize a React Router Link "button" with a custom SVG image. I have found different sources with custom icons to be used, or solution like this but did not succeed with custom image file.The Router link is part of a dynamic list:
<td><Link to={} data-id={} className={"btn btn-success"}>Add new image</Link></td>
And the text would be moved as a hint upon mouseover effect. Any suggestion would be highly appreciated.
Update 1:
So i have tried with and with src. Of course it didnt render and run into error.
I have imported
import { ReactComponent as AddNewImageIcon } from "./WebAppButtons/AddPhoto.svg";
<td><Link to={``} data-id={} className={""}>{<AddNewImageIcon />}Add new image</Link></td>
In this way, it renders, however, there is a weird image background appears under the image:
Screenshot
Did not experience it with SVG files before. Is there any way to remove it or is it the behavior of SVG file in react? The other question is, should it be wrapped into DIV that would be formatted with SCSS or this component can be formatted with SCSS as well, eg.:width/height/hover etc.?
Hi Have the following code in our react native application:
import { SvgCssUri } from 'react-native-svg';
<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} />
I have even tried to use simple SvgUri (instead of SvgCssUri)
But the image still load with out some of the content (Blacks colors):
Also here is the original SVG image used: https://raw.githubusercontent.com/librenms/librenms/master/html/images/os/proxmox.svg
Turns out the blacks were missing due to the fact that React Native SVG didnt do auto fill.
adding fill={'black'} is what was needed into the <SvgUri> tag
using the method described at https://fontawesome.com/how-to-use/on-the-web/using-with/sass I believe I will end up accumulating almost 2.8MB of web fonts in the src folder of my React project. I need to use CSS to add icons to a calendar style, but won't that affect tree shaking? In other words, won't I end up with a huge package size just for using a single icon?
The method #Mike Poole presented is the most correct one for tree shaking. If you use the webfont method, you have no option but to load the entire set. But if you need to use just a few icons, and can't load 'em via js for some reason, you can simply get the svg files you need and add them directly, as either <img> tags or background-images.
Tree shaking using FontAwesome is straightforwards. If you only use a single icon then you only need to import that icon (and certainly don't need to use SASS to do so).
Here is the example that FontAwesome use if you only want to use the solid fa-coffee icon:
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
Here I want to generate a separate stylesheet for Landing component and hopefully for other. Other components will have Hero component too. Can anyone tell me how can I do that?. Is it a good idea?.
Anything with an underscore _name.scss, tells your sass compiler that it's a partial scss file. Simply don't use an underscore for single component scss files, for example: Hero.scss. Then in your Hero.js, you can import the style like so:
import './Hero.scss';
<div className="heroContainer">...</div>
or, if your webpack has been configured to allow scss module imports, then you could do:
import { heroContainer } from './Hero.scss';
<div className={heroContainer}>...</div>
If you want to share heroContainer's styles with other stylesheets, simply use the #extend in your scss file.
clientsContainer {
#extend .heroContainer;
}
The downside to this approach is that you'll have to manually import any partials, like _vars.scss, _mixins.scss...etc, and any other dependent stylesheets into each new Example.scss file.
Ideally, if you're working in a large team, it's better to individualize your scss stylesheets, so that everything is modular (components and their styles can be passed off to someone else, instead of having to send ALL of your stylesheets for ONE component).