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
Related
I'm using primereact and react-google-charts. However, they both want me to call the components as Charts. When I write a chart, I get an error. What solution should I follow?
(https://i.stack.imgur.com/4qGie.png)(https://i.stack.imgur.com/5dpNr.png)
I tried calling the components as chart VSCode gave an error. Then I tried as Gantt and got the above error
you can use import aliases
import {Chart as GoogleChart} from 'react-google-charts';
import {Chart as PrimeChart} from 'primereact';
now use GoogleChart and PrimeChart wherever you want
<GoogleChart />
<PrimeChart />
I installed and imported mui-image into my React project and used it as a component <Image>. The issue is my png image did not showed up on screen (neither svg). However, I inserted a random image link on the internet and it worked. Does that mean my the issue is from my png image? And how do I fix this bug?
I installed npm i mui-imagethen imported import { Image } from "mui-image" to my index.js file
then imported my png image as
import { mypng } from "../img/mypng.png";
...<Image src={mypng} />
(mypng has the dimension of: 2880 × 800)
However, it worked with a random url:
<Image src="https://source.unsplash.com/200x200" />
I would really appreciate your help!
You're using object deconstruction in your import. "../img/mypng.png" has no property called mypng. Try :
import mypng from "../img/mypng.png";
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.?
I want to load multiple SVG icons in a react component. but the component only load first SVG and others shown as a square or repeat first SVG icon
i load the SVG like this
import { ReactComponent as Back} from "./back.svg";
and use it as a component
I tried to load svg file and use img tag
but it has another issue to...
I didn't use any third-party package to load SVG
what is the best way to import SVG file in react js
I found what's the problem...
I had multiple SVG files that all of them had the same id in them...
when I load them together, the page had multiple tags with the same id and only show one image or an empty square
I changed each SVG tag's id and everything is OK now
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.