import Image from 'next/image'
...
<Image src="/emotion.svg" alt="emtion" width={50} height={50} />
I am trying to change the color of the SVG using next/image.
However, applying the following CSS rule does not seem to work:
img {
fill="#ffffff"
}
Can anyone provide a solution for this issue?
Instead of using SVG files directly, I suggest utilizing Playground SVG (). By converting the file to JS, you gain the ability to easily customize aspects such as color and other properties through props.
Instead of using the Image component in Next.js, consider alternative solutions for optimizing SVGs. The default Image component does not provide optimization for SVG files, so here are a few options:
next.config.js file using @svgr/webpack:// next.config.js
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
// Import the SVG file where needed
import YourSvg from './public/yourSvg.svg'
// Use the 'currentColor' property on your SVG for color customization
<YourSvg color="red" />
babel-plugin-inline-react-svg: https://github.com/vercel/next.js/discussions/20993#discussioncomment-760119
https://i.sstatic.net/1ft98.png<Link href={"/setting"} className="h-fit w-fit">
<Image className="dark:invert"
src={"/setting.svg"} alt={"setting.svg"} width={80} height={80} />
</Link>
Simply utilize the invert feature in tailwind css.
Edit: This will only invert the color, which is beneficial for dark mode implementation in my scenario.
Utilizing Next/Image, I am dynamically injecting the SVG URL. To achieve this, I had to utilize the CSS filter property in order to alter the color of the SVG.
Stop using SVG files directly and opt for converting them into React components to simplify the process. This method eliminates the need for intricate setups.
Conversion Steps:
Benefits:
Illustration with Tailwind:
<SVGIcon className="w-4 h-4 text-white" />
By adhering to these guidelines, you'll achieve a simpler and adaptable way to handle SVGs within your Next.js project efficiently.
Credit: The insights shared in this message derive from Andres Campuzano Garzon's valuable contribution.
Implement the filter attribute within the style property of the component.
import Image from 'next/image'
...
<Image src="/emotion.svg" alt="emtion" style={{ filter: 'invert(100%)' }} width={50} height={50} />
To give the SVG icon a blue color using the invert filter, adjust the filter settings accordingly. In this scenario, flipping the colors will change black areas to white and white areas to black. To achieve a blue hue, you must undergo another color inversion process.
<Image src="/emotion.svg" alt="emtion" style={{ filter: 'invert(100%) sepia(100%) saturate(10000%) hue-rotate(180deg)' }} width={50} height={50} />
You have the option to tweak the sepia, saturate, and hue-rotate values to customize the blue shade as desired. For instance, lowering the saturate value can soften the color intensity, while adjusting the hue-rotate value can shift the blue tone.
Upon discovering a practical solution, I decided to modify the svg by adjusting the color settings. When inspecting the svg in vscode, all its configurations become visible.
This specific svg has been altered to display a pink color scheme:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="128.000000pt" height="128.000000pt" viewBox="0 0 128.000000 128.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#FF69B4" stroke="none">
<path d="M647 1233 c-13 -15 -17 -38 -17 -102 l0 -83 -84 -97 c-47 -53 -109
-123 -140 -156 l-55 -60 -1 58 0 57 -175 0 -175 0 0 -400 0 -400 175 0 175 0
0 31 c0 23 4 30 14 26 8 -3 57 -20 108 -38 l93 -33 265 -3 c300 -5 316 -2 354
72 17 33 18 43 8 81 -10 39 -9 48 8 76 22 36 26 98 9 129 -8 16 -5 26 15 50
28 33 35 93 16 129 -8 15 -4 27 15 56 30 44 32 88 5 131 -34 56 -61 63 -235
63 -106 0 -155 3 -155 11 0 6 7 36 16 66 25 85 17 198 -18 251 -52 78 -182
128 -221 85z m113 -85 c42 -29 70 -82 70 -133 0 -22 -13 -87 -30 -145 -16 -58
-30 -108 -30 -112 0 -5 87 -8 193 -8 158 0 197 -3 215 -16 40 -28 26 -80 -24
-90 -30 -6 -34 -10 -34 -39 0 -24 6 -34 24 -43 50 -22 41 -85 -14 -97 -25 -6
-30 -11 -30 -37 0 -20 8 -37 25 -50 27 -21 33 -59 12 -76 -6 -6 -24 -13 -40
-17 -23 -6 -27 -13 -27 -40 0 -25 5 -35 20 -40 24 -7 37 -51 23 -74 -9 -14
-44 -16 -279 -16 l-269 0 -107 39 -108 38 0 215 0 216 88 95 c262 286 262 285
262 379 0 82 6 87 60 51z m-480 -698 l0 -320 -100 0 -100 0 0 320 0 320 100 0
100 0 0 -320z"/>
</g>
</svg>
In order to change the color, focus on the "fill" attribute:
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#FF69B4" stroke="none">
this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...
Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...
In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image b ...
I am attempting to add animations to a button when hovered by using styled from MUI 5, but unfortunately, it is not working as expected. I have looked for guidance and inspiration from: How to apply custom animation effect @keyframes in MaterialUI using m ...
I have been searching for solutions to my problem, but I can't seem to find one that works. My goal is to create two columns that each take up 50% of the screen width. However, I am facing an issue where there is a gap at the top that I cannot seem t ...
Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...
I recently created multiple div elements with a uniform width of 5px. Here is the CSS code I used: div { background-color: black; width: 5px; height: 100px; display: inline-block; } To my surprise, despite setting the same width for all divs, som ...
Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...
I am looking to incorporate a CSS file from the filesystem into my application. The goal is to allow users to dynamically add JavaFX CSS files that can be created by anyone and stored anywhere on their system. I attempted a test scenario to see if adding ...
I'm currently facing an issue in my code. I am working on a single-page web application in ReactJS with 3 tabs. Whenever the user navigates to one tab, the authentication form from FirebaseUI should appear. However, there seems to be a problem as it ...
Setting up a new Next.js project on my Mac (M2) has proven to be quite challenging due to the persistent ERESOLVE error I keep encountering when trying to install react and react-dom. Despite attempting various troubleshooting steps, the issue remains unre ...
I am currently working on a project that involves animating text (specifically "happy birthday to you") and a heart. The idea is for the heart to drop and hit each word one by one, turning them yellow upon impact. Once the last word is hit, the text shou ...
Currently, I am working with version 2.3.6 of the NextUI library. My goal is to incorporate either the DatePicker or the DateInput. The issue I am facing is that the default date format shown is mm/dd/yyyy, but I need it to be displayed in the format dd/m ...
Take a look at my code pen by clicking on this link: https://codepen.io/kiwideejay/pen/zEyZdj?editors=1111 The important line in the code is shown below: componentWillMount() { let items = this.props.objs.map((v,i) =>{ ...
Is there a method to eliminate the transparency of content/images within a <div> that is transparent? Below is the provided HTML: <div id="main-button-wrapper" class="left"> <div id="button-bg-layer" class="box-bg-layer corner ...
I'm looking to test a NextJS component of mine, specifically a searchbar that includes a div which should only display if the "search" state is not empty. const SearchBar = () => { const [search, setSearch] = useState(""); const handleSear ...
Is there a way to align an element to the bottom of its container without knowing the exact height? I'm trying to position the "links" div next to the logo text at its bottom, but since the logo size can vary and may even be an image, setting a fixed ...
As of now, users can easily log in and sign up for my application without any issues. I recently added a "Link your Twitter user to account" button that redirects the user to '/auth/twitter' upon clicking, initiating the oAuth process through pas ...
Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...
I am struggling to change the default font color of the bar menu to red in a razor page. Despite trying the code below, it doesn't seem to work: <Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContr ...