I was wondering if it is somehow possible to use the icons from the react-icons package in PrimeReact, since the primeIcons package unfortunately does not contain all the icons I need for my project.
I haven't found a solution for this, because react-icons exports the icons as components and PrimeReact gets the icons assigned by string.
To change say search icon in a button
you can access https://react-icons.github.io/react-icons/search?q=fasearch
right click on the icon and inspect the elements, copy the SVG for the same from the developer console
create say search.svg file and paste the svg for fasearch in the file
add below class in say root.css file
.pi-search:before {
content: url(search.svg) !important;
}
This will change the search icon
This is a example
import { FaWheelchair, FaBolt, FaCarAlt, FaCar } from "react-icons/fa";
...
return(
<div className="flex card-container overflow-hidden ">
<div className="flex-none flex align-items-center justify-content-center p-1">
<TfiWheelchair />
<p className="text-lg">Wheelchair</p>
</div>
</div>);
Related
I am using NEXTJS and framer motion but the local image is not appearing on the web page. Instead I get that little clip art thing.Below is my code to the particular component not working:
import React from 'react'
import {motion} from "framer-motion";
import aboutPic from './images/wed.jpg'
type Props = {}
function About({}: Props) {
return (
<div className=" flex flex-col relative h-screen text-center md:text-left md:flex-row max-
7xl px-10 justify-evenly mx-auto items-center">
<h3 className="absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl">
About
</h3>
<motion.img
initial={{
x:-200,
}}
transition={{
duration:1.2,
}}
whileInView={{x: 0}}
src={aboutPic}
/>
</div>
)
}
export default About
Most probably due to the location of your image.
According to your specified path, your image should be in the same folder as your 'About' component. Check your image location and path.
Note that in default image imports you can't use direct path for images stored in public folder as in urls.
Instead, you have to locate it like any exported component.
If you are in 'pages' folder and the 'images' folder is in 'public' for example:
import aboutPic from '../public/images/wed.jpg'
or
<img src='/images/wed.jpg'/>
I am facing a problem that in React Next.js, I am unable get the scroll bar vertically. This is my code:
<div className=" hover:bg-violet-400 box-content overflow-y-scroll w-4000">
<div ref={scrollRef}>
{message.map((m) => (
<Message
message={m}
own={m.sender === sender[0]._id}
/>
))}
</div>
</div>
I am using Tailwind Css in this project. The 'overflow-y-scroll' doesnt work. The overflow still happens even this property is empty.
You need to define the height of your div to make your content scrollable inside it. And I just noticed you used w-4000 which is not a tailwind class. So change this as well.
You should remove w-4000 and add w-screen then If your content takes more space than the width, the vertical scrollbar will be available
I've just recently picked up React and Tailwind for a project, and I am still very much a beginner. I wanted to make an element have a background image as a custom class variable, something like this:
<div className="bg-[url(`https://example.com/${variable}.png`)]"></div>
But as Tailwind purges classes, would this somehow be possible? I hope I'm not missing anything, but it doesn't seem doable to me right now
Tailwind has a feature called "safelisting" which may provide you with the functionality you need – see here in the docs.
That said:
1 - There's nothing wrong with using both className and style props on the same element – you can have e.g. <div className="w-full" style={`background: url(https://example.com/${variable}.png`}>
2 – Depending on what flavor of React you are using, your might be better off using a component like Next.js's Image to optimize your images instead of setting background via CSS. Below is how I do it:
import Image from "next/image";
export default function MyBackground(props) {
return (
<div
className="z-0 absolute inset-0 w-full h-full flex justify-center items-center"
>
<Image
placeholder="blur"
alt={props.alt}
src={props.src}
className="h-full w-full object-cover"
/>
</div>
);
}
You can define a different variable for this. In that way, you can manipulate the value accordingly and use that variable to set the styling properties of that element. The code will look something like this:
const YourComponent = () => {
//the variable named variable will hold the dynamic value as per your need
let elementStyle = "bg-[url(`https://example.com/" + variable + ".png";
return (<>
<div className={elementStyle}"></div>
</>
);
}
Created an app with create-react-app and tailwindcss. I am trying to display local images in my website. I created this folder structure in src: assets/media/images/profile.jpg. The image is not displayed in browser. Here's what I am doing.
Here's the component in src/components/Hero.js:
import ImageOne from '../assets/media/images/profile.jpg';
const Hero = () => {
return (
<div className="bg-white h-screen flex flex-col justify-center items-center">
<h1 className="lg:text-9xl md:text-7xl sm:text-5xl text-3xl font-black mb-14">
Text
</h1>
<img class="rounded" src={ImageOne} alt='Profile'/>
</div>
)
}
export default Hero
The image is simply not displayed. Here's what the browser is loading: <img class="rounded" src="/static/media/profile.ba8339ef.jpg" alt="Profile">
Other stackoberflow answers, like React won't load local images, did not help me.
double-check all instructions in the tailwind guide, make sure you replaced react-scripts start by craco start:
https://tailwindcss.com/docs/guides/create-react-app
in the meantime, have a look at this example repository:
https://github.com/oieduardorabelo/2021-03-18-tailwindcss-and-create-react-app
I created an assets/media/images/profile.jpg and src/components/Hero.js with the same snippet you shared here, and it is working correctly 🚀
Move your images folder from src/assets/media/ to public/ and add :
<img class="rounded" src={process.env.PUBLIC_URL + '/images/profile.jpg'} alt='Profile'/>
First, the stack I'm using:
- React: Gatsby
- Typescript
- Scss (using module for each component)
- React Bootstrap
I'm trying to show the content of a React Bootstrap Card only when the mouse hovers over it. The problem is that I am using Gatsby modules for scss, and I cannot find the way to directly access the .card-img-overlay class to change its hover properties, since a module would add its name to the class.
My solution was to wrap a div around it. However it doesn't work. The content is hidden but nothing happens when the mouse hovers it. Here is the code:
projectCard.tsx
import React from 'react'
import { Card } from 'react-bootstrap'
import styles from './projectCard.module.scss'
interface ProjectInfo {
title: string
description: string
imageSrc: any
}
const ProjectCard = (project: ProjectInfo) => (
<Card className="bg-dark text-white">
<Card.Img src={project.imageSrc} alt="Card image" />
<div className={styles.cardContent}>
<Card.ImgOverlay>
<Card.Title> {project.title} </Card.Title>
<Card.Text> {project.description} </Card.Text>
</Card.ImgOverlay>
</div>
</Card>
)
export default ProjectCard
projectCard.module.scss
.cardContent {
visibility: hidden;
}
.cardContent:hover {
visibility: visible;
}
Any help would be appreciated!
I was able to find a solution with the help of a previous comment (someone erased the comment.. but thanks anyways!)
I followed this codepen: https://codepen.io/askibinski/pen/RwWwxxO
<Card className={styles['card']}>
<Card.Img src={project.imageSrc} alt="Card image" className={styles['card-content-image']} />
<div>
<Card.ImgOverlay className={styles['card-content']}>
<Card.Title className={styles['card-content-text']}> {project.title} </Card.Title>
<Card.Text className={styles['card-content-text']}> {project.description} </Card.Text>
<Card.Text className={styles['card-content-text']}> {project.technologies} </Card.Text>
</Card.ImgOverlay>
</div>
</Card>
Note that I couldn't directly access the Bootstrap elements, so I created class for each of them. Also, gatsby has a camelCase convention, but since it doesn't go well with css standards I overwrote that by adding to gatsby-config.js
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-sass`,
options: {
cssLoaderOptions: {
camelCase: false,
},
},
}
However, that is just a band-aid fix for the problem. I still want to access the React Bootstrap variables if possible. For example, I want to center the Card.Img. I have tried using a className, but it doesn't have access to the image itself.
And here is the code trying to access the React Bootstrap name, but it doesn't work
.card-img {
// any type of css here doesn't have any effect
}