dynamically render svg icons in react - reactjs

so I have around 40 svgs in my frontend in seperate files,
and I have an api route that gives me the name of the svg on request to I can import it, but I'm not quite sure how to dynamically import these svgs in react right now
I tried this but it means I can't change styles of svgs if I render them in img tag
export const renderIcon = ({ name, folder }) => {
return <img src={`/${folder}/${name}.svg`} alt="" />;
};
is there a better way of doing this?
context:
basically name just returns the name of the svg and folder is only either "outline" or "filled", I was trying to find a way to return the svg from this file but i couldn't so i was trying the img instead.

Related

How to put an image variable as a background using tailwind in React?

Hey i am learning React and i am creating a React application where in one of my components i am importing one of my images from my imagefolder.
import Image from '../images/image.jpg';
I would like to use this image as a background by using a tailwind className
export const Gallery = () => {
return (
<div className="bg-[url('{Image}')]"></div>
)
}
i tried it this way but the image isnt rendering and i get nothing back.
Did i do something wrong here?
Thanks in advance!!
Instead of importing the image, simply reference the image path:
<div className="bg-[url('../images/image.jpg')]"></div>
Imho, The best way to do this will be to extend theme in tailwind config.
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
}
}
}
tailwind docs

Serve Static HTML route in React App (Typescript)

I have a normal React app using functional components. It has its own CSS and everything works fine.
I now want to incorporate another route at /FAQ that serves a long static HTML file (FAQ) I have that has its own CSS and design that is already written for me. I don't want to incorporate that into the rest of the apps design structure, I just want the route to take the user to the new content it its own pre-designed style.
I have tried creating a new component for my FAQ that imports the statis HTML and CSS and then simply serves this component from App.tsx.
const App = () => {
return(
<Page>
<FAQ>
<Page>
)
}
In my FAQ component I have tried using the dangerouslySetInnerHTML attribute like this to load the static HTML from the file in the Public folder:
import { FC } from "react";
import FAQContent from "./FAQ";
const FAQ: FC = () => {
return (
<>
<div
dangerouslySetInnerHTML={{__html: FAQContent }}
/>
</>
);
};
export default FAQ;
I get a TS error stating:
Type 'FC<{}>' is not assignable to type 'string'. TS2322
Am I going about this all wrong?
For routing in react, I suggest trying react-router, it would make your project much easier!
Also, if I remember it right, you can only pass type "string" inside dangerouslySetInnerHTML, so you can create a text file and pass the file into dangerouslySetInnerHTML or you can put FAQContent (as html string) in a constant and then pass the constant inside dangerouslySetInnerHTML.
Let me know if this works!
To serve the static page, place it in your project's public folder. You can then link to it from a React component like so:
FAQ
(process.env.PUBLIC_URL dynamically provides the location of the public folder)

How to pass in an object to component then to src for Image?

I want to make passing in an object as a property but I run into this error:
Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to > the next/image component. Received: {}
I've tried using the ...props but the same error persists.
I'm using Next JS with Material UI. Here's a slimmed down version of what I'm working on with only the relevant parts.
See that myIcon is being passed down.
index.js
import myIcon from '../public/icon.png'
import TripleCard from './tripleCard'
<TripleCard cardData={{ icon: {myIcon}, size: "100px" }}></TripleCard>
tripleCard.js
import Image from 'next/image'
export default function TripleCard({ cardData }) {
return(
<Image src={cardData.icon} height={cardData.size}/>
)
}
I think you should check you directory for myIcon.
I looked at the objects in the console and realized that the image object was nested inside the Icon object.
What I thought:
cardData
|_ icon
Reality:
props
|_ cardData
|__ icon
|___ myIcon
so tripleCard.js should look like this:
import Image from 'next/image'
export default function TripleCard({ props }) {
return(
<Image src={props.cardData.icon.myIcon} height={props.cardData.size}/>
)
}

Reusable Gatsby Transformer Cloudinary Image dynamic image sources

I've installed "gatsby-transformer-cloudinary" to my gatsby website. I've implemented API integration and It can be fetched and I can see any single image on a page from Cloudinary. I just want to use this component dynamically and I need your help how do I used image name area as dynamically like props ((eg: "image"))?
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Image from "gatsby-image"
export default (props) => {
const data = useStaticQuery(graphql`
query {
image: file(name: { eq: "3144_xl-2015" }) {
cloudinary: childCloudinaryAsset {
fixed(width: 300) {
...CloudinaryAssetFixed
}
}
}
}
`)
return (
<div className="image-example">
<Image
fixed={data.image.cloudinary.fixed}
alt={props.alt}
title={props.title}
/>
</div>
)
}
You are using a staticQuery (or useStaticQuery hook, in the end it works exactly in the same way), since it's a limitation from it, you can't pass variables. From the documentation:
StaticQuery does not accept variables (hence the name “static”), but
can be used in any component, including pages
If you want to use a dynamic <Img> component from gatsby-image you will need to use a page query and pass some kind of unique value (like a slug) and filter through it.

React - render imported .svg file

I need to render .svg files. I do not want to use dangerouslySetInnerHTML. I am able to successfully render an svg if I copy the svg contents directly and render it from a component.
However, this is not very reusable. I don't want to copy the contents from each .svg file. I would like to be able to import an svg file and pass that into my component that will then render the contents.
Here's what I have done so far, but it is not rendering my svg.
I have created a component that accepts an imported svg file, like this:
import React from "react";
class SvgComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
props.svg // this works if I copy my .svg contents here (<svg>....</svg>)
);
}
};
SvgComponent.propTypes = {
svg: React.PropTypes.string.isRequired,
};
export default SvgComponent;
And here is how I am using that component:
import mySvg from './images/mySvg.svg';
const Icon = (props) => {
return (
<svgComponent svg={mySvg} />
);
};
Icon.propTypes = {
icon: React.PropTypes.string.isRequired,
};
export default Icon;
This does not work -- it does not show my svg on the webpage, or even in the dom. When I inspect the page, all I see is an empty svgComponent:
<svgComponent />
Any help on getting .svg files to display in react would great!
I created a module to solve this problem. With it you can load the svg and manipulate its elements using JSX without having to paste the svg code.
Npm package:https://www.npmjs.com/package/react-samy-svg
Check an example on Glitch: https://fossil-transport.glitch.me
It's simple to use
<Samy path="path to your svg file">
<Proxy select="#Star" fill="red"/>
</Samy>
Whenever you need to change some SVG attribute just create a Proxy element and use the 'select' prop (accepts CSS selectors). All props set on Proxy will be forwared as attributes to the SVG element(s)

Resources