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.?
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>
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
Hi Im getting text data from react markdown ,
const exampleMarkDown=
`<ol>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ol>`
and the output is
1.example1
2.example2
3.example2
and I would like to add material ui icon right next to
1. example <ICON HERE>
in react component.
so is there's any way I can do that??
You can use string literals and include the component next to the string.
const exampleMarkDown=
`<ol>
<li>example1 ${<Icon>}</li>
<li>example2 ${<Icon>}</li>
<li>example3 ${<Icon>}</li>
</ol>
`
EDIT: Ah, i just noticed you said you're using react markdown, sorry about that. I haven't used that library before, the only thing I can think of is adding the icon in the markdown before you receive it.
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 trying to load an SVG containing a map of country regions and then dynamically colorize the paths based on other data in the render function.
Is there a way in react to load a static SVG file at build or runtime and modify styles dynamically when rendering based on properties passed in?
You can use https://www.npmjs.com/package/react-samy-svg . This is how you can load an svg file and change an attribute. (No need to paste the svg code into the jsx)
<Samy path="https://raw.githubusercontent.com/hugozap/react-samy-svg/master/examples/1.svg">
<Proxy select="#Star" fill="red"/>
</Samy>
A Proxy element will select an svg element (using CSS selectors) and forward all its props to the selected element as attributes.
There is nothing hard about it.
Loading SVG file - just use $.ajax call for the resource, with dataType: 'text'
Use dangerouslySetInnerHTML to put it anywhere.
Changing of colors really depends on the way your SVG is structured. Ideally you should be able to change colors just using CSS (e.g. swap classes or generate style dynamically). If everything else fails, SVG is just text so you can do any text processing (color replacement) between steps 1 and 2.
I think it would be quite tough if even possible.
There are some approaches that claim to solve similar problem of converting string to react components (react-jsx-parser, html-to-react), or alternatively you can try converting html -> JSX -> JS (last step using babel) and subsequently requiring resulting js to obtain generated component.
Taking into account complexity of the steps above it might be simpler just to render SVG as html content of some div (using dangerouslySetInnerHTML) and later modify its styles using JS/jquery directly.