Comments (11)
Hi.
you can use onMouseEnter
and onMouseLeave
to set a state then change color depends on that state.
example:
import { useState } from 'react';
import { Happyemoji } from 'iconsax-react';
function App() {
const [hover, setHover] = useState(false);
return (
<div className='App'>
<Happyemoji
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
color={hover ? '#ff0000' : '#0000ff'}
/>
</div>
);
}
from iconsax-react.
App.js
import "./styles.css";
import { Camera } from 'react-feather';
export default function App() {
return (
<div className="App">
<div class="container">
<div class="card">
<h3 class="header">This is option</h3>
<p class="small">
Card description with lots of great facts and interesting details.
</p>
<Camera class="a" />
</div>
</div>
</div>
);
}
Paste this in styles.css
* {
transition: all 0.3s ease-out;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
h3 {
color: #262626;
font-size: 17px;
line-height: 24px;
font-weight: 700;
margin-bottom: 4px;
}
p {
font-size: 17px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
p.small {
font-size: 14px;
}
.card {
display: block;
top: 0px;
position: relative;
max-width: 262px;
background-color: #fff;
border-radius: 4px;
padding: 32px 24px;
margin: 12px;
text-decoration: none;
z-index: 0;
overflow: hidden;
border: 1px solid #f2f8f9;
}
.card:hover {
transition: all 0.2s ease-out;
box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
top: -4px;
border: 1px solid #cccccc;
background-color: white;
}
.card:hover:before {
transform: scale(2.15);
}
.card:hover {
background-color: #cd7f32;
}
.card:hover .header {
transition: all 0.3s ease-out;
color: #ffffff;
}
.card:hover .small {
transition: all 0.3s ease-out;
color: rgba(255, 255, 255, 0.8);
}
.card:hover .a{
transition: all 0.3s ease-out;
color: rgba(255, 255, 255, 0.8);
}
Preview:-
Screen.Recording.2021-12-28.at.8.26.16.PM.mov
from iconsax-react.
update v0.0.8 => now currentColor
is default color
from iconsax-react.
Thank you @rendinjast, this works like a charm.
Maybe "inherit" be a better name, it is used in other libraries like material-ui. It is just a suggestion.
from iconsax-react.
Hi @rendinjast
The problem is, I'm rendering a list of services that has a name and a time, to the time I'm using an icon.
My goal is when the user do the mouse hover on the card, all inside it need to change color.
Example:
Card is white and text/icons are black, on hover, card is brown and text/icons need to be white.
from iconsax-react.
You can implement onMouseEnter
onMouseLeave
on that card.
from iconsax-react.
Yes, but, there is no option to do this with CSS?
from iconsax-react.
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<div class="container">
<div class="card">
<h3 class="header">This is option</h3>
<p class="small">
Card description with lots of great facts and interesting details.
</p>
</div>
</div>
</div>
);
}
Paste this in styles.css
* {
transition: all 0.3s ease-out;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
h3 {
color: #262626;
font-size: 17px;
line-height: 24px;
font-weight: 700;
margin-bottom: 4px;
}
p {
font-size: 17px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
p.small {
font-size: 14px;
}
.card {
display: block;
top: 0px;
position: relative;
max-width: 262px;
background-color: #FFF;
border-radius: 4px;
padding: 32px 24px;
margin: 12px;
text-decoration: none;
z-index: 0;
overflow: hidden;
border: 1px solid #f2f8f9;
}
.card:hover {
transition: all 0.2s ease-out;
box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
top: -4px;
border: 1px solid #cccccc;
background-color: white;
}
.card:hover:before{
transform: scale(2.15);
}
.card:hover {
background-color: #CD7F32;
}
.card:hover .header{
transition: all 0.3s ease-out;
color: #ffffff;
}
.card:hover .small{
transition: all 0.3s ease-out;
color: rgba(255, 255, 255, 0.8);
}
Preview:-
Screen.Recording.2021-12-28.at.7.50.16.PM.mov
from iconsax-react.
Hi @pushpender-singh-ap this I already have, the problem is that I can't change the color of the icons via CSS, at least, preserving the appearance.
Normal:
my code: (I'm using material-ui v4)
card: {
'& :hover $changeColor': {
backgroundColor: 'transparent',
// backgroundColor: theme.palette.primary.main,
color: theme.palette.text.hover || theme.palette.getContrastText(theme.palette.primary.main),
transition: '0.4s',
},
'&> :hover': {
backgroundColor: theme.palette.primary.main,
transition: '0.4s',
},
'&> :not(:hover)': {
// FIXME: Search for one alternative to this. (avoid :not(:hover))
transition: '0.4s',
},
backgroundColor: theme.palette.secondary.main,
borderRadius: 10,
margin: 8,
},
changeColor: {
backgroundColor: 'transparent',
color: theme.palette.text.main || theme.palette.getContrastText(theme.palette.secondary.main),
cursor: 'pointer',
fontWeight: 'bold',
transition: '0.4s',
},
With material UI icons or react-feather this code changes the icon color too.
from iconsax-react.
I can't change the color of the icons via CSS,
set color to currentColor
<div className='App'>
<Happyemoji color='currentColor' />
</div>
in css:
.App {
color: blue;
}
/* more specific */
.App svg {
color: red;
}
currentColor
will be default color in next version
from iconsax-react.
I will try your suggestions @pushpender-singh-ap and @rendinjast, but for now, none of them works, I need to spend more time on this.
I think is because this is a subcomponent of the Chip component.
from iconsax-react.
Related Issues (14)
- Ram usage HOT 2
- Wrong icon name
- Twitter icon not available HOT 1
- Linear and Bold variants of some icons are swapped
- Using a single component to add any icons without importing all HOT 5
- Mail/Envelope Icon HOT 1
- Will there be updates? HOT 1
- Can't Change the Stroke Width
- [Critical] Does not work in production build HOT 4
- Wrong icons HOT 3
- Production bundle returns all 6000 icons even when I import only 1 icon HOT 16
- Wrong icon name HOT 2
- Fill property not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iconsax-react.