search

marcopixel / r6operators

r6operators is a collection of high-quality vectorized Rainbow Six: Siege Operator icons & metadata for Node.js
https://r6operators.marcopixel.eu
MIT License
100 stars 10 forks source link

Explanation for React #24

Closed OmegaHawkeye closed 2 years ago

OmegaHawkeye commented 2 years ago

Hi,

I really like this repo but I have one Issue by trying to integrate it with React.

I get the operators I want to dynamically display from my backend/api but if I try to apply the .toSVG function, I get like it says just a string representation of the SVG and I dont know and didnt found a simple Solution to display that properly as a tag in React.

Hope u understand my problem and mby u can help me.

marcopixel commented 2 years ago

There are multiple ways for you to do this in React, but if you want to use the .toSVG() function I've quickly threw together an example using react-inlinesvg and dangerouslySetInnerHTML.

Both approaches are valid, but I would recommend using the first one as it is more customizable and it's also less susceptible to XSS attacks.

Example: https://codesandbox.io/s/r6operators-react-example-d91xj?file=/src/App.js

OmegaHawkeye commented 2 years ago

Thx for the quick response.

That really made some things way clearer and easier.

U said there are multiple ways for React, could u provide some links. I'm just learning React and Redux Toolkit with this project so it would help a lot.

marcopixel commented 2 years ago

I would recommend reading the docs for the two most used dependencies for SVGs in React (react-svg, react-svgr). These show a different way of directly importing the .svg files instead which allows for a few advantages but also at increased complexity if you use dynamic file names (like for operator names)