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
<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">
When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...
In my ReactJS project, I am trying to parse through a JSON list using the following model: public class ModelEmployee { public List<Employeelist> Employees { get; set; } public int count { get; set; } public int Pagenumber { get; set; } ...
Is there a way to create a shadow effect for DIVs similar to the text-shadow property? While text-shadow is great for adding shadows to individual pieces of text, I'm interested in applying a shadow effect to an entire DIV element. Does anyone have a ...
For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...
I developed a unique app that utilizes marked.js to convert markdown files into HTML and then showcases the converted content on a webpage. In the following code snippet, I go through text nodes to extract all raw text values that are displayed and store t ...
The cell width property seems to be ignored in this situation. Despite trying numerous approaches, the cells are splitting into equal portions and not respecting the specified width. Inspecting the code did not reveal any unexpected inheritance that could ...
Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...
Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...
I am trying to customize the mouse cursor behavior of a TextField component from Material UI when its variant is set to "outlined". Currently, the cursor changes to Text but I want it to appear as a pointer instead. I attempted to override the default beha ...
I am currently developing an image gallery with multiple sections that contain various images. My goal is to arrange each section of images in a single row, allowing horizontal scrolling similar to Netflix's layout. However, I'm facing challenges ...
When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...
Is there a way to remove the black border that appears when hovering over a text field? import React, { useState } from "react"; import TextField from '@mui/material/TextField'; import { styled } from '@mui/material/styles'; c ...
Currently, I am working on a project using Create React App (CRA) with Material-ui and Styled Components for styling. As I develop the CSS for my application, I need to access the default theme provided by Material-ui. Here is a snippet from my package.js ...
Is there a way to replace the number with a label next to a new row added to my table using MUI Badge? For example, instead of displaying a number like 4, I want it to show the word "New" as shown in this image: enter image description here This is the co ...
After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...
My current scenario is as follows: I am in the process of developing a website using NextJS (SSR) I have a requirement to load a script that will locate a div element and insert some HTML content (scripts and iframes) within it. The issue at hand: It se ...
I am planning to create a boilerplate for React and Node, with the following root folder structure: - (root level) - client - src - public - package.json - ... - package.json - server.js - node_module ...
I encountered an issue while using react-sortablejs with local images, where the src to image is not displaying properly in my code snippet: import { useState } from "react"; import axios from "axios"; import { useRouter } from "ne ...
Currently, I am implementing Material UI for a context menu in a React application. To demonstrate the issue, I have created a minimum reproducible example which can be found here: https://codesandbox.io/s/summer-silence-xzxwd3?fontsize=14&hidenavigat ...
I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...