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.
Related
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 am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such
<ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
</ch5-button>
I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :
declare var CrComLib: typeof import('#crestron/ch5-crcomlib');
...
const ch5Button = new CrComLib.Ch5Button();
console.log("ch5Button");
console.log(ch5Button);
The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.
Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.
I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.
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'
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 need to request static files from a react component's render method based on a dynamic prop, it's id in my particular case. My folder structure is similar to this, the number of images in each gallery folder is arbitrary :
-hardcode
-id_1
-gallery1
-img1.jpg
-img2.jpg
-gallery2
-img1.jpg
-img2.jpg
-data.json
-id_2
-gallery1
-img1.jpg
-img2.jpg
-img3.jpg
-gallery2
-img1.jpg
-data.json
-id_3
...
Ideally, I need to get an array of image files that gallery1 and gallery2 folders contain and also get contents of data.json based on id. What would be the best way to implement that?